HTML Select + 限制可见选项的数量答案

【问题标题】：HTML Select + limit number of options visibleHTML Select + 限制可见选项的数量
【发布时间】：2012-01-21 17:51:30
【问题描述】：

我在图中显示了加入日的选择。它显示 20 天可见，有 21 到 31 天不可见，但您可以向下滚动到它们。由于页面的布局，选择向上而不是向下 - 看起来很奇怪。

考虑到这一点，我可以将可见选择选项的数量限制为 10 个吗？例如：显示 01 到 10，隐藏 11 到 31，但可供选择。

这个可以吗？

谢谢

【问题讨论】：

这个问题已经讨论过了。 stackoverflow.com/questions/5538330/…

标签： html select

【解决方案1】：

将属性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>

【讨论】：

这会导致选择元素变成一个微调器，一次显示 2 个项目，没有下拉菜单。

【解决方案2】：

行为取决于浏览器，不受作者控制。您可以在元素中使用 size=10 属性，但它也会将菜单更改为列表框，这样即使菜单没有聚焦，也可以看到 10 个选项。要实现您描述的行为，您需要使用 JavaScript 和 CSS 构建自己的控件。

从可用性的角度来看，当要选择一个月中的某一天时，文本输入框通常比菜单更可取。键入一位或两位数字比从大约 30 个项目的列表中选择更方便。

【讨论】：

你能指出我使用 javascript 和 css 添加自己的控件的方向吗？我宁愿下拉...
@Adam JQuery UI

【解决方案3】：

实际上，有一个小技巧可以实现这种奇怪的缺乏选择 SELECT TAG 上显示的项目数量的可能性。

1 -

假设我们想要一个最多显示 10 个项目的 SELECT。将以下 js 事件添加到您的 SELECT TAG 将实现此目标：

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();'

这会欺骗你的 SELECT 给它想要的效果，把它变成一个大小的 SELECT。

2 -

假设在某个时刻，我们想要显示的项目少于 10 个。

假设您从 SQL 查询中获取 SELECT，您可以执行以下操作：一旦你知道你的查询有多少行，你就可以将下一个句子包含到循环中

if($nRow<10){
  $nRowSelect=$nRow+1;
}
else{
  $nRowSelect=10;
}

因此，如果每个循环中的行数少于 10 行，它就会分配要显示的所需行数。

onfocus='this.size=$nRowSelect;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();'

3 -

替换元素的错误行为。由于这个 hack 用一个“大小”的 SELECT 替换了一个普通的 SELECT，它占用了它需要置换内容的空间，而不像一个覆盖它下面的内容的普通 SELECT。如果要放置 SELECT 以防止这种情况发生，比如说放入 TD TAG，您可以先将其放入具有以下样式的 DIV：

position:absolute;
z-index:1;

这将使大小的 SELECT 与其下方的内容重叠，就好像它是一个普通的 SELECT。

【讨论】：