HTML选择+限制可见选项的数量

Question

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

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

可以这样做吗？

THX

Answer 1

实际上有一个小黑客可以实现选择SELECT TAG中显示的项目数量的奇怪缺乏。

1 -

假设我们想要一个SELECT，最多显示10个项目。 将以下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 -

Buggy行为取代元素。 由于这个hack用一个'size'替换了一个普通的SELECT，它需要占用内容所需的空间，而不是像下面的内容重叠的常见SELECT。 为了防止这种情况发生，如果要放置SELECT，让我们说一个TD TAG，你可以先用下面的风格把它放在DIV中：

position:absolute;
z-index:1;

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

Answer 2

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

Answer 3

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

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