HTML 选择 + 限制可见选项的数量 [英] HTML Select + limit number of options visible

问题描述

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

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.

考虑到这一点，我可以将可见选择选项的数量限制为 10 个吗?例如:显示 01 到 10，隐藏 11 到 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.

这能做到吗?

谢谢

推荐答案

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

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.

1 -

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

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:

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

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

This will trick your SELECT giving it the desired effect turn it to a sized SELECT.

2 –

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

Let’s say that at certain point there are less than the maximum 10 items we want to display.

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

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

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

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

So if there are less than 10 rows at every loop it allocates the desired number of rows it is going to display.

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

3 –

错误行为取代元素.由于这个 hack 用一个大小"的 SELECT 替换了一个普通的 SELECT，它占用了它需要替换内容的空间，而不是像一个普通的 SELECT 重叠它下面的内容.为了防止在 SELECT 被放置时发生这种情况，让我们说到 TD TAG 中，您可以先将它放置在具有以下样式的 DIV 中:

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:

position:absolute;
z-index:1;

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

This will let the sized SELECT overlap the content below it as if it were a common SELECT.

这篇关于HTML 选择 + 限制可见选项的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！