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.

可以做到吗?

thx

推荐答案

实际上，有一点小技巧可以解决这种奇怪的缺乏选择在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-

比方说，我们希望SELECT最多显示10个项目. 在您的SELECT TAG中添加以下js事件即可实现此目标:

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 –

移动行为替代元素. 由于此技巧将普通的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屋！