如何限制HTML <select>下拉菜单中的可见选项？
如何限制在HTML <select>下拉菜单中显示的选项数量？
例如：
<select> <option value="1">1</option> <option value="2">2</option> ... <option value="20">20</option> </select>
如何让浏览器只显示前五个选项并向下滚动？
你可以试试这个
<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>
它为我工作
您可以使用size属性使<select>显示为一个框，而不是一个下拉框。 您在size属性中使用的数字定义在没有滚动的情况下在框中可见多less个选项。
<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>
你不能把它应用到一个<select> ，并且它仍然作为一个下拉列表出现。 浏览器/操作系统将决定下拉列表中应该显示多less选项，除非您使用HTML，CSS和JavaScript创build假下拉列表。
Tnx @ Raj_89，你的诀窍是非常好的，可以更好，只能通过使用额外的风格，使其他的DOM对象，就像一个普通的select标签在HTML …
select{ position:absolute; }
你可以在这里看到结果： http : //jsfiddle.net/aTzc2/
大小属性很重要，如果大小= 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>
Raj_89的解决scheme是最接近于有效的选项，正如凯文·斯沃茨在评论中提到的那样，它将打破IE，这对于大量的企业客户端来说是一个问题（并告诉你的客户端，你将不会为IE编写代码“ “不太可能让你的老板高兴;））。
所以我玩弄了这个问题：这个'onmousedown'事件在IE中是适合的，所以我们想要做的就是防止用户第一次点击下拉菜单时的默认值。 重要的是，这只是我们这样做的时候：如果我们在下一次点击时防止尴尬，当用户做出select时，onchange事件不会被触发。
这样，我们得到很好的下拉，没有闪烁，没有打破IE浏览器 – 只是工作…以及至less在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中select，其余的将实际上允许您使用选项。
希望这有助于某人。
我使用这个代码，它在Chrome，Firefox和IE上都适用于我。
<select onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()" onblur="this.size=0;"> <option>option1</option> <option>option2</option> <option>option3</option> <option>option4</option> <option>option5</option> <option>option6</option> <option>option7</option> </select>
无法限制select下拉列表中可见元素的数量（如果将其用作下拉框而不是列表）。
但是你可以使用javascript / jQuery来replace这个select框，这看起来像一个下拉框。 那么你可以根据需要处理下拉的高度。
jNice将是一个具有这样的function的jQuery插件。 但是也有很多的select。
使用<select> size属性;
