Javascript 如何在javascript中自动展开html选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2923600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to automatically expand html select element in javascript
提问by xan
I have a (hidden) html select object in my menu attached to a menu button link, so that clicking the link shows the list so you can pick from it.
我的菜单中有一个（隐藏的）html 选择对象附加到菜单按钮链接，因此单击该链接会显示列表，以便您可以从中进行选择。
When you click the button, it calls some javascript to show the <select>. Clicking away from the <select>hides the list. What I really want is to make the <select>appear fully expanded, as if you had clicked on the "down" arrow, but I can't get this working. I've tried lots of different approaches, but can't make any headway. What I'm doing currently is this:
当您单击该按钮时，它会调用一些 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()
}
- I've tried calling
$('list').click(). - I've tried setting
onfocus="this.click()"But in both cases I'm getting
- 我试过打电话
$('list').click()。 - 我试过设置
onfocus="this.click()"但在这两种情况下我都得到
Uncaught TypeError: Object # has no method 'click'
未捕获的类型错误：对象 # 没有方法“单击”
which is peculiar as link textsays that it supports the standard functions.
这很特别，因为链接文本说它支持标准功能。
I've tried setting the .size = .lengthwhich works, but doesn't have the same appearance (as when you click to open the element, it floats over the rest of the page.)
我试过设置.size = .length哪个有效，但外观不一样（因为当你点击打开元素时，它漂浮在页面的其余部分。）
Does anyone have any suggestions?
有没有人有什么建议？
回答by Czarek Tomczak
I've come across the same problem, wanted to implement keyboard navigation in my app, but select elements were not expanded, so people using the keyboard were going to lose functionality. I've created ExpandSelect() function which emulates mouse clicks on select elements, it does so by creating another <select>with multiple options visible at once by setting the sizeattribute, the code is hosted on Google Code website, ExpandSelect.js is only 4 KB, see screenshots and download it here:
我遇到了同样的问题，想在我的应用程序中实现键盘导航，但选择元素没有展开，所以使用键盘的人将失去功能。我创建了 ExpandSelect() 函数来模拟鼠标在选择元素上的点击，它<select>通过设置size属性来创建另一个具有多个选项同时可见的函数，代码托管在 Google Code 网站上，ExpandSelect.js 只有 4 KB，查看屏幕截图并在此处下载：
http://code.google.com/p/expandselect/
http://code.google.com/p/expandselect/
Screenshots
截图
There is a little difference in GUI when emulating click, but it does not really matter, see it for yourself:
模拟点击的时候GUI有一点区别，但其实无所谓，自己看吧：
When mouse clicking:
鼠标点击时：
(source: googlecode.com)
（来源：googlecode.com）
When emulating click:
模拟点击时：
(source: googlecode.com)
（来源：googlecode.com）
More screenshots on project's website, link above.
项目网站上的更多屏幕截图，上面的链接。
回答by T.Todua
Here a simple solution, AUTO-EXPANDED select menu (all options visible)
这是一个简单的解决方案，AUTO-EXPANDED 选择菜单（所有选项可见）
<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>
回答by suresh.g
Please try this:
请试试这个：
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()
}
回答by Anthony
You have a syntax error. It should be:
您有语法错误。它应该是：
$('#list').click();
You forgot the #
你忘记了 #
回答by Thomas Fonseca
The simplest way is to use the "multiple" attribute in HTML
最简单的方法是使用 HTML 中的“multiple”属性
<select multiple></select>
<select multiple></select>
and you could also add a style attribute to set the height of the list
你也可以添加一个样式属性来设置列表的高度
<select multiple style="height:150px;"></select>
