javascript - 如何在javascript中自动扩展html选择元素

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 = .lengthwhich 可以工作，但外观不一样（当您单击打开元素时，它会浮在页面的其余部分上。）

有没有人有什么建议？

Answer 1

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

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

截图

模拟点击的时候，GUI有一点区别，不过没关系，自己看吧：

鼠标点击时：

_{（来源：googlecode.com）}

模拟点击时：

_{（来源：googlecode.com）}

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

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>

Answer 3

请试试这个：

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()
}

Answer 4

您有语法错误。它应该是：

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

你忘了#

Answer 5

最简单的方法是在 HTML 中使用“multiple”属性

<select multiple></select>

您还可以添加样式属性来设置列表的高度

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