Question

可能重复：
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

是否可以使用jQuery显示select元素的下拉列表？

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

Answer 1

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

另一种方法是以编程方式更改选择框的size-attribute，但这不是你想要的。

我建议你想一想为什么需要这个，以及是否会有更好的软件模式？

Answer 2

不 - 你无法做到这一点。当用户点击它时，它大致沿着按钮处于按下状态的同一行 - 用户设置值的“临时”操作。你可以focus，但就是这样。

如果真的想要模拟这个，你可以玩一些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); 
});

这不会打开下拉列表，但它有点工作。

演示here。

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

3 个答案: