Select input tag - make middle date selected on click

I currently have a standard s开发者_如何学Pythonelect 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!

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/

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>.

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.

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.