如何限制HTML <select>下拉列表中的可见选项？

Question

如何限制HTML <select>下拉列表中显示的选项数量？

例如:

    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="20">20</option>
    </select>

如何让浏览器只显示前五个选项并向下滚动以查看其余选项？

Answer 1

你可以试试这个

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
             <option value="1">This is select number 1</option>
             <option value="2">This is select number 2</option>
             <option value="3">This is select number 3</option>
             <option value="4">This is select number 4</option>
             <option value="5">This is select number 5</option>
             <option value="6">This is select number 6</option>
             <option value="7">This is select number 7</option>
             <option value="8">This is select number 8</option>
             <option value="9">This is select number 9</option>
             <option value="10">This is select number 10</option>
             <option value="11">This is select number 11</option>
             <option value="12">This is select number 12</option>
           </select>

它对我有用

Answer 2

您可以使用该size属性将<select>显示为框而不是下拉列表.您在size属性中使用的数字定义了框中可见的多少选项而不滚动.

<select size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

• http://jsfiddle.net/cSSjF/

您不能将其应用于a <select> 并使其仍显示为下拉列表.浏览器/操作系统将决定应该为下拉列表显示多少选项,除非您使用HTML,CSS和JavaScript创建虚假的下拉列表.

Answer 3

Raj_89解决方案最接近有效选项尽管Kevin Swarts在评论中提到它会破坏IE,这对于大量企业客户来说是一个问题(告诉你的客户你不会为IE编码"因为原因"不太可能让你的老板高兴;)).

所以我玩了它,这就是问题所在:'onmousedown'事件正在IE中投入适合,所以我们想做的是防止用户第一次点击下拉列表时的默认值.重要的是,这只是我们这样做的时间:如果我们在下次点击时阻止了免责,当用户选择时,onchange事件将不会触发.

通过这种方式,我们获得了良好的下拉,没有闪烁,没有分解IE - 只是工作......至少在IE10及以上,以及所有其他主要浏览器的最新关联.

<p>Which is the most annoing browser of them all:</p>
<select id="sel" size = "1">
    <option></option>
    <option>IE 9</option>
    <option>IE 10</option>
    <option>Edge</option>
    <option>Firefox</option>
    <option>Chrome</option>
    <option>Opera</option>
</select>

这是小提琴:https://jsfiddle.net/88cxzhom/27/

更多注意事项:1)绝对定位和设置z-index有助于避免在显示选项时移动其他元素.2)使用'currentTarget'属性 - 这将是所有浏览器中的select元素.虽然'目标'将在IE中被选中,但其余的将实际允许您使用选项.

希望这有助于某人.

Answer 4

size 属性很重要，如果 size=5，则将显示前 5 个项目，对于其他项目，您需要向下滚动。

<select name="numbers" size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>