如何在javascript中自动展开html选择元素 [英] How to automatically expand html select element in javascript
问题描述
我的菜单中有一个(隐藏的)html 选择对象附加到菜单按钮链接，因此单击该链接会显示列表，以便您可以从中进行选择.
当您单击按钮时，它会调用一些 javascript 来显示 .单击远离 隐藏列表.我真正想要的是使 显示完全展开，就好像您单击了向下"箭头一样，但我无法使其正常工作.我尝试了很多不同的方法，但无法取得任何进展.我目前正在做的是:
<a href="javascript:showlist();"><img src="/images/icons/add.png"/>添加收藏</a><select id="list" style="display:none; onblur="javascript:cancellist()"></选择> //在代码中功能显示列表(){//使用原型而不是jQuery$('list').show();//显示选择列表$('list').focus();//设置焦点，以便当您单击离开时它会调用 onblur()}- 我试过调用
$('list').click(). - 我试过设置
onfocus="this.click()"但在这两种情况下，我都得到
Uncaught TypeError: Object # has no method 'click'
这很特别，因为
(来源:
(来源:googlecode.com)
项目网站上的更多屏幕截图，上面的链接.
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.
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:
<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
Uncaught TypeError: Object # has no method 'click'
which is peculiar as link text says that it supports the standard functions.
I've tried setting the .size = .length which works, but doesn't have the same appearance (as when you click to open the element, it floats over the rest of the page.)
Does anyone have any suggestions?
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 size attribute, the code is hosted on Google Code website, ExpandSelect.js is only 4 KB, see screenshots and download it here:
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:
When mouse clicking:
(source: googlecode.com)
When emulating click:
(source: googlecode.com)
More screenshots on project's website, link above.
这篇关于如何在javascript中自动展开html选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
