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.

Answer 2

The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.

From the usability point of view, a text input box is usually preferable to a menu when a day of a month is to be chosen. It is more convenient to type one or two digits than to select from a list of 30 or so items.

Answer 3

Add attribute size to <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>