How can I limit the visible options in an HTML <select> dropdown?

Question

How can I limit the number of shown options in an HTML <select> drop down?

For example:

    <select>     <option value="1">1</option>     <option value="2">2</option>     ...     <option value="20">20</option>     </select> 

How can I get the browser to show only the first five options and scroll down for the rest?

Answer 1

You can try this

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">               <option value="1">This is select number 1</option>               <option value="2">This is select number 2</option>               <option value="3">This is select number 3</option>               <option value="4">This is select number 4</option>               <option value="5">This is select number 5</option>               <option value="6">This is select number 6</option>               <option value="7">This is select number 7</option>               <option value="8">This is select number 8</option>               <option value="9">This is select number 9</option>               <option value="10">This is select number 10</option>               <option value="11">This is select number 11</option>               <option value="12">This is select number 12</option>             </select>

It worked for me

Answer 2

You can use the size attribute to make the <select> appear as a box instead of a dropdown. The number you use in the size attribute defines how many options are visible in the box without scrolling.

<select size="5">     <option>1</option>     <option>2</option>     <option>3</option>     <option>4</option>     <option>5</option>     <option>6</option>     <option>7</option>     <option>8</option>     <option>9</option>     <option>10</option>     <option>11</option>     <option>12</option> </select> 

• http://jsfiddle.net/cSSjF/

You can’t apply this to a <select> and have it still appear as a drop-down list though. The browser/operating system will decide how many options should be displayed for drop-down lists, unless you use HTML, CSS and JavaScript to create a fake dropdown list.