如何限制 HTML <select> 下拉列表中的可见选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8788245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I limit the visible options in an HTML <select> dropdown?
提问by medowlock
How can I limit the number of shown options in an HTML <select>drop down?
如何限制 HTML<select>下拉列表中显示的选项数量？
For example:
例如：
<select>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="20">20</option>
</select>
How can I get the browser to show only the first five options and scroll down for the rest?
如何让浏览器仅显示前五个选项并向下滚动其余选项？
回答by Raj_89
You can try this
你可以试试这个
<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>It worked for me
它对我有用
回答by Paul D. Waite
You can use the sizeattribute to make the <select>appear as a box instead of a dropdown. The number you use in the sizeattribute defines how many options are visible in the box without scrolling.
您可以使用该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>
You can't apply this to a <select>andhave it still appear as a drop-down list though. The browser/operating system will decide how many options should be displayed for drop-down lists, unless you use HTML, CSS and JavaScript to create a fake dropdown list.
您不能将它应用到 a<select>并让它仍然显示为下拉列表。浏览器/操作系统将决定应该为下拉列表显示多少选项，除非您使用 HTML、CSS 和 JavaScript 来创建一个虚假的下拉列表。
回答by Michal Ja
Raj_89 solution is the closest to being valid option altough as mentioned by Kevin Swarts in comment it is going to break IE, which for large number of corporate client is an issue (and telling your client that you won't code for IE "because reasons" is unlikely to make your boss happy ;) ).
Raj_89 解决方案是最接近有效选项的方法，尽管正如 Kevin Swarts 在评论中提到的那样，它会破坏 IE，这对于大量企业客户来说是一个问题（并告诉您的客户您不会为 IE 编码“因为原因" 不太可能让你的老板高兴 ;) )。
So I played around with it and here is the problem: the 'onmousedown' event is throwing a fit in IE, so what we want to do, is to prevent default when user clicks the dropdown for the first time. It is important this is only time we do this: if we prevent defult on the next click, when user makes his pick, the onchange event won't fire.
所以我玩弄了它，这里是问题：'onmousedown' 事件在 IE 中很不合适，所以我们想要做的是在用户第一次点击下拉菜单时防止默认。重要的是，这只是我们这样做的时候：如果我们在下一次点击时防止违约，当用户做出选择时， onchange 事件将不会触发。
This way we get nice dropdown, no flicker, no breaking down IE - just works... well at least in IE10 and up, and latest relases of all the other major browsers.
通过这种方式，我们得到了漂亮的下拉菜单，没有闪烁，没有破坏 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>
Here is the fiddle: https://jsfiddle.net/88cxzhom/27/
这是小提琴：https: //jsfiddle.net/88cxzhom/27/
Few more things to notice: 1) The absolute positioning and setting z-index is helpful to avoid moving other elements when the options are displayed. 2) Use 'currentTarget' property - this will be the select element across all browsers. While 'target' will be select in IE, the rest will actually allow you to work with option.
还有几点需要注意：1）绝对定位和设置 z-index 有助于避免在显示选项时移动其他元素。2) 使用 'currentTarget' 属性 - 这将是所有浏览器中的选择元素。虽然 'target' 将在 IE 中被选择，其余的实际上将允许您使用选项。
Hope this helps someone.
希望这可以帮助某人。
回答by mohammadreza berneti
Tnx @Raj_89 , Your trick was very good , can be better , only by use extra style , that make it on other dom objects , exactly like a common select option tag in html ...
Tnx @Raj_89，你的技巧非常好，可以更好，只能通过使用额外的样式，使其在其他 dom 对象上，就像 html 中的常见选择选项标签一样......
select{
position:absolute;
}
u can see result here : http://jsfiddle.net/aTzc2/
你可以在这里看到结果：http: //jsfiddle.net/aTzc2/
回答by shiva L
the size attribute matters, if the size=5 then first 5 items will be shown and for others you need to scroll down..
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>
回答by Affes Med Fedi
I used this code and it worked for me on Chrome, Firefox and IE.
我使用了这段代码，它在 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>回答by Armin
It is not possible to limit the number of visible elements in the select dropdown (if you use it as dropdown box and not as list).
无法限制选择下拉列表中可见元素的数量（如果您将其用作下拉框而不是列表）。
But you could use javascript/jQuery to replace this selectbox with something else, which just looks like a dropdown box. Then you can handle the height of dropdown as you want.
但是你可以使用 javascript/jQuery 用其他东西替换这个选择框，它看起来像一个下拉框。然后您可以根据需要处理下拉列表的高度。
jNicewould be a jQuery plugin which has such features. But there also exists many alternatives for that.
jNice将是一个具有此类功能的 jQuery 插件。但也存在许多替代方案。
回答by harun ugur
<p>Which one true?</p>
<select id="sel">
<option>-</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
( display just first option of all options)
（仅显示所有选项中的第一个选项）
document.getElementById("sel").options.length=1;
回答by ijse
Use sizeattribute of <select>;
使用size属性<select>；
