我可以使用jQuery打开下拉列表吗？

Question

对于HTML中的下拉列表:

<select id="countries">
<option value="1">Country</option>
</select>

我想打开列表(与左键单击相同).这可能是使用JavaScript(或更具体的jQuery)吗？

Answer 1

我试图找到同样的事情而感到失望.我最终更改了选择框的属性大小,因此它似乎打开了

$('#countries').attr('size',6);

然后当你完成

$('#countries').attr('size',1);

Answer 2

您可以轻松地模拟元素上的单击,但单击a <select>将不会打开下拉列表.

使用多个选择可能会有问题.也许您应该考虑容器元素中的单选按钮,您可以根据需要进行扩展和收缩.

Answer 3

我遇到了同样的问题,我有一个解决方案.一个名为ExpandSelect()的函数模拟鼠标单击"select"元素,它通过创建另一个<select>绝对位置的元素并通过设置size属性一次可见多个选项来实现.在所有主流浏览器中测试过:Chrome,Opera,Firefox,Internet Explorer.解释它是如何工作的,以及这里的代码:

编辑(链接已损坏).

我在Google Code上创建了一个项目,在那里找代码:

http://code.google.com/p/expandselect/

截图

在模拟点击时,GUI有一点点差别,但这并不重要,请亲自看看:

鼠标点击时:

鼠标点击http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

模拟点击时:

模拟单击http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

项目网站上有更多截图,链接如上.

Answer 4

这是从上面的答案中汲取的,并使用选项的长度/数量来符合实际有多少选项.

希望这有助于有人获得他们需要的结果!

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

Answer 5

这应该涵盖它:

 var event;
 event = document.createEvent('MouseEvents');
 event.initMouseEvent('mousedown', true, true, window);
 countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var

例如,这可以绑定到按键事件,因此当元素具有焦点时,用户可以键入并自动扩展...

--Context--

  modal.find("select").not("[readonly]").on("keypress", function(e) {

     if (e.keyCode == 13) {
         e.preventDefault();
         return false;
     }
     var event;
     event = document.createEvent('MouseEvents');
     event.initMouseEvent('mousedown', true, true, window);
     this.dispatchEvent(event);
 });

Answer 6

简单易行.

function down(what) {
  pos = $(what).offset();  // remember position
  $(what).css("position","absolute");
  $(what).offset(pos);   // reset position
  $(what).attr("size","10"); // open dropdown
}

function up(what) {
$(what).css("position","static");
$(what).attr("size","1");  // close dropdown
}

现在你可以像这样调用你的DropDown

<select onfocus="down(this)" onblur="up(this)">

适合我的作品.

也许更好,因为你对页面上其他元素的位置没有任何问题.

function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}

function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}

将ID更改为修复值mybe不聪明,但我希望你能看到这个想法.