Select input tag - make middle date selected on click

Question

I currently have a standard select input for years. Currently, when clicked, it presents a long list of years from 1900-2000, that require you to scroll down.

Is there a way to make it appear in the middle, when clicked, so that you can scroll up or down?

I hope this makes some sense!

Answer 1

use selected attribute

 <select name="years">
    <option>1900</option>
    <option>1901</option>
    <option>1902</option>
    <option>1903</option>
    <option>1904</option>
    <option selected="selected">1905</option>
    <option>1906</option>
    <option>1907</option>
    <option>1908</option>
    <option>1909</option>
    <option>1910</option>
    </select>

example: http://jsfiddle.net/tnU4K/

Answer 2

Make a value somewhere around the middle (maybe 1950) selected by default. When someone clicks the select the selected value will be visible, so you can scroll up or down.

Answer 3

For a drop down <select> element? Not in a standardized, cross browser way. Some browsers may (untested) allow you to manipulate the scrollTop property of the select element while the list is visible, but I wouldn't count on it. The only way to start in the middle is have the middle year selected by default.

Personally, I wouldn't bother. Most users know that they can type whilst focusing a <select> element anyway — I rarely use the mouse to select an option in a drop-down <select>.

Answer 4

You could always go hog wild and do something like this using jquery:

//get number of options
var optCount = $('#example option').length;
//divide by 2 and round up for odd numbers
var midPoint = Math.round(optCount/2);
//select that index item
$("#example option:eq(midPoint)").attr("selected", "selected");

I haven't tested but it should work.