HTML 选择 + 限制可见选项的数量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8530173/
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
HTML Select + limit number of options visible
提问by Adam
I have the select shown in the graphic for a Join Day. It shows 20 visible days and has 21 to 31 not visible but you can scroll down to them. Because of the layout of the page the select goes up instead of down - looks strange.
我在图中显示了加入日的选择。它显示了 20 个可见的天数，还有 21 到 31 个不可见的天数，但您可以向下滚动到它们。由于页面的布局，选择向上而不是向下 - 看起来很奇怪。
With this in mind can I limit the number of visible select options to say 10? Eg: show 01 to 10 and have 11 to 31 hidden but available for selection.
考虑到这一点，我可以将可见选择选项的数量限制为 10 个吗？例如：显示 01 到 10 并隐藏 11 到 31 但可供选择。
can this be done?
可以这样做吗？
thx
谢谢
回答by Joaquin
Actually there is a little hack that can achieve this weird lack of possibility to choose the number of items displayed at the SELECT TAG.
实际上有一个小技巧可以实现这种奇怪的缺乏选择在 SELECT TAG 上显示的项目数量的可能性。
1 -
1 -
Let's say we want a SELECT displaying a maximum number of 10 items. Adding the following js events to your SELECT TAG will achieve this goal:
假设我们想要一个 SELECT 显示最多 10 个项目。将以下 js 事件添加到您的 SELECT TAG 将实现此目标：
onfocus='this.size=10;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();'
This will trick your SELECT giving it the desired effect turn it to a sized SELECT.
这将欺骗您的 SELECT 给它所需的效果将它变成一个大小的 SELECT。
2 –
2 –
Let's say that at certain point there are less than the maximum 10 items we want to display.
假设在某个时刻，我们想要显示的项目少于最多 10 个。
Assuming you are getting your SELECT from a SQL query you can do something like the following: Once you know how many rows your query has you can include the next sentence to the loop
假设您从 SQL 查询中获取 SELECT，您可以执行以下操作：一旦您知道您的查询有多少行，您就可以将下一句包含在循环中
if($nRow<10){
$nRowSelect=$nRow+1;
}
else{
$nRowSelect=10;
}
So if there are less than 10 rows at every loop it allocates the desired number of rows it is going to display.
因此，如果每个循环的行数少于 10 行，它会分配将要显示的所需行数。
onfocus='this.size=$nRowSelect;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();'
3 –
3 –
Buggy behavior displacing elements. Since this hack replaces a common SELECT with a ‘sized' one it takes the space it needs displacing content, not like a common SELECT which overlaps the content below it. To prevent this from happening if the SELECT is going to be placed let's say into a TD TAG you can first place it in a DIV with the following style:
越野车行为取代元素。由于这个 hack 用一个“大小”的 SELECT 替换了一个普通的 SELECT，它占用了它需要替换内容的空间，而不是像一个普通的 SELECT 重叠它下面的内容。如果要放置 SELECT 以防止发生这种情况，让我们说到 TD TAG 中，您可以先将其放置在具有以下样式的 DIV 中：
position:absolute;
z-index:1;
This will let the sized SELECT overlap the content below it as if it were a common SELECT.
这将使大小的 SELECT 与它下面的内容重叠，就好像它是一个普通的 SELECT。
回答by ijse
Add attribute sizeto <select>:
将属性添加size到<select>：
<select style=" width:100px;" size="2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
回答by Jukka K. Korpela
The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.
行为取决于浏览器，不能由作者控制。您可以在元素中使用 size=10 属性，但它也会将菜单更改为列表框，以便即使未聚焦菜单时也可以看到 10 个选项。要实现您描述的行为，您需要使用 JavaScript 和 CSS 构建自己的控件。
From the usability point of view, a text input box is usually preferable to a menu when a day of a month is to be chosen. It is more convenient to type one or two digits than to select from a list of 30 or so items.
从可用性的角度来看，当要选择一个月中的某一天时，文本输入框通常比菜单更可取。输入一位或两位数字比从大约 30 个项目的列表中选择更方便。
