如何在javascript中自动扩展html select元素 [英] How to automatically expand html select element in javascript

问题描述

我在我的菜单中有一个（隐藏的）html选择对象附加到一个菜单按钮链接，因此点击链接将显示列表，以便您可以从中选择。

当你点击按钮时，它会调用一些javascript来显示< select> 。点击< select> 隐藏列表。我真正想要的是让< select> 完全展开，就好像你点击了向下箭头一样，但是我无法实现这个功能。我尝试了很多不同的方法，但无法取得任何进展。我现在做的是这样的：

 < li> 
< a href =javascript：showlist（）;>< img src =/ images / icons / add.png/>添加收藏夹< / a> 
< select id =liststyle =display：none; onblur =javascript：cancellist（）> 
< / select> 
< / li> 
 $ b $ //代码
函数showlist（）{
 //使用原型而不是jQuery 
 $（'list'）。show（）; //显示选择列表
 $（'list'）。focus（）; //设置焦点，以便当你点击它时调用onblur（）
} 
  

• 我试着调用 $（'list'）。click（）。


• 我试过设置 onfocus =this.click（）
  但是在两种情况下，
  

未捕获的TypeError：对象＃没有方法'点击'

这是链接文字 a>表示它支持标准函数。

我试过设置 .size = .length 哪个作品，但没有th相同的外观（当你点击打开元素时，它会漂浮在页面的其余部分。）

有没有人有任何建议？

解决方案

我遇到过同样的问题，想在我的应用中实现键盘导航，但是选择的元素没有扩展，所以使用键盘的人将失去功能。我创建了ExpandSelect（）函数来模拟鼠标在选择元素上的点击，它通过创建另一个< select> 来设置 size 属性，代码托管在Google Code网站上，ExpandSelect.js只有4 KB，请参见截图并在此处下载：

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

p>

屏幕截图

模拟点击时GUI有点不同，但它并不重要，请参阅您自己：

鼠标点击：

MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

模拟点击时：

Emulating点击http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

项目网站上的更多截图，上面的链接。

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:

MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

When emulating click:

EmulatingClicking http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

More screenshots on project's website, link above.

这篇关于如何在javascript中自动扩展html select元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！