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>

Javescript如下。

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

任何想法...... ??

Answer 1

您无法使用.trigger模仿本机浏览器事件。查看this link到jQuery教程，您似乎需要jquery.simulate.js中的.simulate方法。此外，下拉框的公开事件由mousedown而不是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();
    }

DEMO：

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

JQUERY

$('#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 test this

Answer 4

试试这个

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

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

展开选择下拉列表

4 个答案:

HTML

JQUERY