在 jQuery 中显示选择下拉列表？

Question

可能的重复：
如何以编程方式告诉 HTML SELECT 下拉（例如，由于鼠标悬停）？

是否可以使用 jQuery 使选择元素上的下拉菜单可见？

我尝试使用 $('#dropdown').click();，但没有效果。

Answer 1

这是不可能的。您只能实现自己的选择框，但这不利于可用性。

另一种方法是以编程方式更改选择框的大小属性，但这并不是您真正想要的。

我建议考虑一下为什么需要这个以及是否有更好的软件模式？

Answer 2

不 - 您无法执行此操作。当用户单击按钮时，它与处于按下状态的按钮大致相同 - 用户设置值的“临时”操作。您可以关注它，但仅此而已。

如果您真的想要模拟这个，您可以使用一些CSS。例如，您可以创建一个看起来类似于下拉列表的列表，并根据用户单击的内容设置下拉值 - 类似于自动完成列表的外观。

如果您想向用户显示所有值，您可以随时将其更改为多行列表框。您可以通过将 size 设置为任意值来实现此目的，并在想要隐藏时将其设置回 1。它并不完美，但它是另一种选择：

$("#open").click(function(e){
   e.preventDefault();
   $("#myselect").attr("size",5);    
});

$("#myselect").click(function(){
   $(this).attr("size",1); 
});

http://jsfiddle.net/jonathon/cr25U/

Answer 3

这是我的修改：

HTML

<button id='btn'>Click Me</button>
<select id='test'>
    <option>Blah 1</option>
    <option>Blah 2</option>
    <option>Blah 3</option>
    <option>Blah 4</option>
</select>

JavaScript

$('#btn').click(function(){
    $('#test').attr('size', 5);
});

$('#test').change(function() {
   $(this).attr('size', 1); 
});

这不会打开下拉列表，但它可以工作。

演示此处。