在jQuery中如何显示下拉选择框？

Question

可能是重复问题：
如何通过编程告诉HTML SELECT下拉（例如由于mouseover）？

是否可以使用jQuery使选择元素的下拉列表可见？

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

- Hailwood

---

也许是重点，但我怀疑。 - RageZ

请参见以下链接：https://dev59.com/PHE85IYBdhLWcg3wYigB#2800276。 - sje397

谢谢，我确实尝试过搜索，但可能没有使用正确的关键词... 谢谢。 - Hailwood

另一个例子：http://jsfiddle.net/mtLUp/4/ - shasi kanth

Answer 1

这是不可能的。你只能实现自己的下拉框，但这对可用性来说并不好。

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

我建议考虑为什么需要这样做，是否有更好的软件模式？

- Stuck

---

现在可以通过触发mousedown事件来打开选择框，解决方法在这里: https://dev59.com/eWkv5IYBdhLWcg3wpCXJ - jave.web

只有在Chrome上对我有效。IE8或FF不起作用；因此仍然无法以浏览器友好的方式实现。 - 321X

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/

- Jonathon Bolster

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

这并不能打开下拉列表，但有点儿用。
示例请看这里。

- sje397