javascript - 可滚动的下拉列表

Question

我试图弄清楚这一点。这是示例代码

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>

你如何使这个可滚动的？假设您希望它只显示 3 个选项，可滚动到最后一个选项，并且仍然是一个下拉菜单。许多人建议attr "size"使用<select>. 这将产生可滚动的效果，但不是我想要的。

那么这甚至可能吗？我一直在研究论坛，许多人建议使用<div>带有 style 的标签overflow auto。但我只是想知道是否可以创建可滚动的下拉菜单。

提前致谢。

Answer 1

试试这个..这里的下拉列表在被选中时变为列表框，并在选择任何选项或从中移除焦点时返回到之前的状态。

JSFiddle

    <select name="select1" onmousedown="if(this.options.length>8){this.size=10;}" onchange='this.size=0;' onblur="this.size=0;">
...
...
</select>

Answer 2

如果长度超过限制，默认情况下它会变成可缩放的。我不知道这是否是特定于浏览器的，但在 chromed 11 / ubuntu 中，选择下拉菜单可以随着第 21 个条目滚动。