HTML Select + limit number of options visible

Question

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.

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.

can this be done?

thx

Answer 1

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 -

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();'

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

2 –

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

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;
}

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 –

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;

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