HTML Select + limit number of options visible

Question

I have the select shown in the graphic for a Join Day. It shows 20 visible day

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.