我的菜单中有一个(隐藏的)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’

这是特殊的,因为link text说它支持标准功能.

我已经尝试设置.size = .length,但是没有相同的外观(当你点击打开元素时,它会漂浮在页面的其余部分.)

有没有人有什么建议？

解决方法:

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

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

截图

在模拟点击时,GUI有一点点差别,但这并不重要,请亲自看看：

鼠标点击时：

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

模拟点击时：

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

项目网站上有更多截图,链接如上.