jquery - 展开选择下拉菜单

Question

我正在尝试在单击链接时展开选择下拉列表。

<button type="button" id="btn">Click Me!</button> 
<select id='sel' name='sel'>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
    <option>item 4</option>
</select>

和 JavaScript 如下。

$(document).ready(function() {
    $("#btn").click(function() {
       $("#sel").trigger('click');
    });
});

有任何想法吗...？？

Answer 1

您不能使用.trigger. 查看指向 jQuery 教程的链接，您似乎需要.simulate来自jquery.simulate.js的方法。此外，下拉框的打开事件由mousedownnot给出click。

更新：所以代码变成：

$(document).ready(function() {
    $("#btn").click(function() {
       $("#sel").simulate('mousedown');
    });
});

Answer 2

//https://stackoverflow.com/a/10844589/7926961
  function openDropdown(elementId) {
        function down() {
            var pos = $(this).offset(); // remember position
            var len = $(this).find("option").length;
                if(len > 20) {
                    len = 20;
                }

            $(this).css("position", "absolute");
            $(this).css("zIndex", 9999);
            $(this).offset(pos);   // reset position
            $(this).attr("size", len); // open dropdown
            $(this).unbind("focus", down);
            $(this).focus();
        }
        function up() {
            $(this).css("position", "static");
            $(this).attr("size", "1");  // close dropdown
            $(this).unbind("change", up);
            $(this).focus();
        }
        $("#" + elementId).focus(down).blur(up).focus();
    }

演示：

http://jsfiddle.net/XE73h/444/

Answer 3

我想找到解决这个问题的方法，我在 FF、chrome 和 Edge 中进行了测试。

HTML

<select id="selecttest">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">free</option>
    <option value="4">four</option>
    <option value="5">five</option>
    <option value="6">six</option>
    <option value="7">seven</option>
    <option value="8">height</option>
    <option value="9">nine</option>
    <option value="10">ten</option>
    <option value="11">eleven</option>
    <option value="12">twelve</option>
    <option value="13">thirdteen</option>
</select>
<input type="button" value="testing" id="MyButton"/>

查询

$('#MyButton').on("click",function(){
    $("#selecttest").attr("size", 8);
    $("#selecttest").css("position","fixed");
    $('#MyButton').css("margin-left", $("#selecttest").width() + 5);});
$('#selecttest').on("change",function(){
    $("#selecttest").attr("size", 1);});

jsfiddle测试这个

Answer 4

试试这个

$(document).ready(function() {
    $("#btn").click(function() {

    document.getElementById('sel').size='2'  
    });
});