如何在JavaScript中自动展开HTML select元素

Question

我在菜单中添加了一个（隐藏的）HTML选择对象，并将其附加到菜单按钮链接上，这样点击链接就会显示列表以供选择。

当您单击按钮时，它会调用一些JavaScript来显示<select>。单击<select>外部区域会隐藏该列表。我真正想要的是使<select>完全展开，就像您单击“向下”箭头一样，但我无法做到这一点。我尝试了很多不同的方法，但没有任何进展。我目前正在进行的操作如下：

<li>
    <a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a>
    <select id="list" style="display:none; onblur="javascript:cancellist()">
    </select>
</li>

// in code
function showlist() {
    //using prototype not jQuery
    $('list').show();  // shows the select list
    $('list').focus(); // sets focus so that when you click away it calles onblur()
}

• 我尝试过调用$('list').click()。
• 我尝试设置onfocus="this.click()"，但是两种情况下都会得到

Uncaught TypeError: Object # has no method 'click'

这很奇怪，因为链接文本说它支持标准函数。

我尝试设置.size = .length，它可以工作，但外观不同（当你单击打开元素时，它浮动在页面的其余部分上方）。

有人有什么建议吗？

- xan

---

可能是 Open Select using Javascript/jQuery? 的重复问题。 - Nick Craver

可能是重复的问题：如何以编程方式告诉HTML SELECT下拉（例如，由于鼠标悬停） - Christian C. Salvadó

类似的问题 - 感谢您指出它们 - 它们似乎更多地是在寻找控件大小的选项（宽度和高度），而我只想让它显示为“打开”。 - xan

@xan，CMS指出的重复问题确切地回答了这个问题：你不能。你需要自定义HTML/JS。 - Florian Margaine

Answer 1

我遇到了同样的问题，想在我的应用程序中实现键盘导航，但选择元素没有展开，因此使用键盘的人将失去功能。我创建了ExpandSelect()函数，它模拟鼠标单击选择元素，方法是创建另一个<select>，通过设置size属性一次显示多个选项，代码托管在Google Code网站上，ExpandSelect.js仅有4 KB，您可以在这里查看截图并下载：

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

屏幕截图

在模拟点击时，GUI 有一点不同，但这并不重要，您可以自己看看：

当鼠标点击时：

_{(来源：googlecode.com)}

当模拟点击时：

_{(来源：googlecode.com)}

更多屏幕截图请参见项目网站上方的链接。

- Czarek Tomczak

---

链接已失效，您可以在此处获取 https://gist.github.com/adamcoulombe/5390270 - Peter Brand

Answer 2

这里有一个简单的解决方案，自动展开选择菜单（所有选项都可见）

<select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;">
  <option selected="selected" value="0">defaulttt</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>
<script type="text/javascript">
 var slctt=document.getElementById("ddlTestSelect");
 slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px';
</script>

- T.Todua

Answer 3

您有一个语法错误。应该是：

$('#list').click();

你忘了加 # 符号了

- Anthony

---

是的，但“click”不会展开“select”元素。 - Christian C. Salvadó

Answer 4

请尝试这个：

function showlist() {
    //using prototype not jQuery
    $('#list').show();  // shows the select list
    $('#list').focus(); // sets focus so that when you click away it calles onblur()
}

- suresh gopal

---

我把你的代码放到 JSFiddle 上，但是它不起作用。选择框能够接收焦点，但是却没有展开。（在Win7上使用Chrome浏览器） - Roddy of the Frozen Peas

@RoddyoftheFrozenPeas，我刚看了你的JSFiddle。请应用"display:none;" CSS属性于选择框中。在脚本中使用"$('#list')"代替"$('list')"，并在JSFiddle的左侧选择jquery 1.8.2版本。 - suresh gopal

你在回答中的代码说“使用原型而不是jQuery”。但它仍然无法工作。更新的fiddle。虽然它确实显示了选择，但它没有展开。（Chrome，Win7。） - Roddy of the Frozen Peas

Answer 5

最简单的方法是在HTML中使用“multiple”属性： <select multiple></select> 你也可以添加一个样式属性来设置列表的高度。

<select multiple style="height:150px;"></select>

- Thomas Fonseca