Question

如何按按钮打开选择下拉列表？

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

我的代码：http://jsfiddle.net/UGkWp/

更新
我找到了webkit浏览器的解决方案，但只有这些浏览器：http://jsfiddle.net/UGkWp/2/也许您知道每个浏览器中的这个怎么做？

Answer 1

(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/

Answer 2

你只能使用这样的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/

Answer 3

我想你应该看看这个页面：

Can I open a dropdownlist using jQuery

似乎无法直接执行此操作，但存在模拟您要执行的操作的工具。

一个简单的解决方案是使用jquery的“selected”-plugin： http://harvesthq.github.io/chosen/

这也为您提供了一些优于普通选择的优势，并且易于使用。

在此，你可以简单地发射如下所示的“mousedown”事件：

$('#dropdown_id_chzn').trigger('mousedown')

鉴于您已在页面上启用了（和jquery），以下代码应该可以解决问题：

HTML：

<select name="foo">
  <option value="1">Bar</option>
</select>

JavaScript的：

$('select[name="foo"]').chosen();
$('#foo_chzn').trigger('mousedown');

请注意，所选内容会自动将“_chzn”附加到您的下拉列表名称，这是您应该在选择器中使用的内容

Answer 4

我在这里找到了一个很好的解决方案： https://stackoverflow.com/a/18284923/8472295

在这种情况下，您可以将按钮包装在标签中并应用相同的解决方案。

HTML

<label for="orderby">
    <button type="button">
        <span>Sort</span>
    </button>
</label>
<select id="orderby" name="orderby" class="orderby" aria-label="Sort By">
    <option value="date" selected="selected">Latest</option>
    <option value="popularity">Popularity</option>
    <option value="rating">Average rating</option>
    <option value="price">Price: low to high</option>
    <option value="price-desc">Price: high to low</option>
</select>

JS

$("label").mouseover(function(){
    var $this = $(this);
    var $input = $('#' + $(this).attr('for')); 
    if ($input.is("select") && !$('.lfClon').length) {
        var $clon = $input.clone();
        var getRules = function($ele){ return {
            position: 'absolute',
            left: $ele.offset().left,
            top: $ele.offset().top,
            width: $ele.outerWidth(),
            height: $ele.outerHeight(),
            opacity: 0,
            margin: 0,
            padding: 0
        };};
        var rules = getRules($this);
        $clon.css(rules);
        $clon.on("mousedown.lf", function(){
            $clon.css({
                marginLeft: $input.offset().left - rules.left,
                marginTop: $input.offset().top - rules.top,
            });
            $clon.on('change blur', function(){
                $input.val($clon.val()).show();
                $clon.remove();
            });
            $clon.off('.lf');
        });
        $clon.on("mouseout.lf", function(){
            $(this).remove();
        });
        $clon.prop({id:'',className:'lfClon'});
        $clon.appendTo('body');
    }
});

演示： http://jsfiddle.net/Yh3Jf/24/

js会创建一个select元素的克隆，该克隆会更新原始元素。

经过测试并为我工作，以我为例，我用它用CSS隐藏了选择字段，然后该按钮触发了一个下拉菜单，可以进行选择。

Answer 5

希望这个帮助

<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);
    }
})

Answer 6

这对我有用

$（'select'）。focus（）;

Answer 7

我认为这会对你有帮助..

Trigger documentation

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

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

小提琴Here

jQuery打开选择按钮

7 个答案: