11

ボタンで選択ドロップダウンを開くには?

$('button').on('click', function() {
   $('select').trigger('click');
});

私のコード: http://jsfiddle.net/UGkWp/

更新:
Webkit ブラウザーの解決策を見つけましたが、これらのブラウザーのみ: http://jsfiddle.net/UGkWp/2/たぶん、各ブラウザーでこれを行う方法を知っていましたか?

4

7 に答える 7

8

次のように CSS だけでそれを行うことができます。

<html>
<body>

<div class="sorting">
<div class="sort right"><label>
<span>Items per page</span>
    <select>
    <option value="">Items per page</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="40">40</option>
    <option value="60">60</option>
    <option value="100">100</option>
    <option value="200">200</option>
    </select>

    <span class="pointer"><i class="fa fa-caret-down"></i></span>
    </label>
    </div>
    </div>


</body>
</html>
<style>
select{
  -webkit-appearance:none;
    appearance:none;
      -moz-appearance:none;
}
.sorting{
    padding:5px 10px;
    border:1px solid #eee;
    clear:both;
  background:#FFF;
  height:40px;
}
.sorting h4{
    padding:4px 0 0;
    margin:0;
}
.sort{
    position:relative;  
    padding-left:10px;
  float:left;
}
.sort>label{
    font-weight:normal !important
}
.sort span.pointer{
    height:30px;
    width:30px;
    border-left:1px solid #ddd;
    position:absolute;
    right:0;
    top:0;
    text-align:center;
    color:#c49633;
    font-size:20px;
    z-index:1;
}
.sort span.pointer i{
    margin-top:6px;
}
.sorting select{
    padding:5px 40px 5px 10px !important;
    margin-left:10px;
    border:1px solid #eee;
    background:none;
    height:30px;
    position:relative;
    z-index:2;
}
</style>

詳細については、このフィドルを参照してください: https://jsfiddle.net/ssjuma/1mkxw2nb/1/

于 2016-10-09T13:06:33.757 に答える
7 
(function($) {
    "use strict";
    $.fn.openSelect = function()
    {
        return this.each(function(idx,domEl) {
            if (document.createEvent) {
                var event = document.createEvent("MouseEvents");
                event.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                domEl.dispatchEvent(event);
            } else if (element.fireEvent) {
                domEl.fireEvent("onmousedown");
            }
        });
    }
}(jQuery));
$('#country').openSelect();

http://jsfiddle.net/yqs90jdw/

于 2015-07-07T13:59:54.720 に答える
0

この助けを願っています

<select id="s">
    <option>aaaaa</option>
    <option>bbbbb</option>
    <option>ccccc</option>
</select>

<button>button</button>

$("button").click(function () {
    var size = $('#s option').size();
    if (size != $("#s").prop('size')) {
        $("#s").prop('size', size);
    } else {
        $("#s").prop('size', 1);
    }
})
于 2013-10-17T16:54:14.150 に答える
-14

私はこれがあなたを助けると思う..

Trigger documentation

$('button').on('click', function() {
    $('select').trigger('click');
});

$('select').click(function(){
alert($(this).val());
});

フィドルHere

于 2013-10-17T18:02:11.240 に答える