Question

使用HTML选择下拉列表如下：

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

有没有办法可以点击页面上其他位置的按钮，让选择框下拉显示选项？好像我点击了选择框本身。

Answer 1

不，不是没有使用自定义下拉选择元素。

jQuery有.click()，但只会执行绑定到select元素的任何onclick事件，而不是GUI元素本身的本机“click”事件。

Answer 2

Gareth的答案是对的！

一种可能的替代方法可能是更改选择框的大小属性，这不会使select出现，但会将其显示为列表框。类似的东西：

function showSelect()
{
   var sel = document.getElementById('test');
   sel.size = 3;
   return false;   
}

<select id="test" size="1"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
</select> 

<a href="#" onlclick="return showSelect();">show select list</a>

Answer 3

没有。（抱歉）

Answer 4

您可以通过这样做来增加实际选择区域的大小：

<select id="list1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<button type="button" onclick="expand()">Click Me!</button>

<script type="text/javascript">
function expand()
{
   document.getElementById("list1").size=3;
}
</script>

这并没有完全扩展下拉列表，而是通过增加页面的高度来显示更多内容，但它仍然可以实现您想要的效果。

Answer 5

是的，但解决方案比您想象的要简单。不要编写java脚本来激发焦点，只需创建按钮并将选择元素绝对放在其上面，不透明度为0.001。这将允许您按照DOM的预期方式触发选择。

例如，请参阅zappos如何执行此操作here。

这个有效！试试吧！

有没有办法通过单击按钮使选择框下拉

5 个答案: