Развернуть выделение

Я пытаюсь расширить раскрывающийся список select при нажатии на ссылку.

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

Любые идеи...??

Ответ 1

Вы не можете имитировать собственное событие браузера с помощью .trigger. Глядя на эту ссылку в учебник jQuery, кажется, вам нужен метод .simulate из jquery.simulate.js. Более того, открытое событие выпадающего окна дается mousedown not click.

Обновление: Таким образом, код станет:

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

Ответ 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/

Ответ 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 проверить это

Ответ 4

попробуйте это

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

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