Select input tag - make the selected intermediate date pressed

Question

I currently have a standard entry for many years to choose from. Currently, clicking on it displays a long list of years from 1900 to 2000, which requires scrolling down.

Is there a way to do this in the middle when pressed so you can scroll up or down?

Hope this makes 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

For the <select> dropdown element? Not in the standard cross-browser mode. Some browsers may (unverified) allow you to manipulate the scrollTop property of the scrollTop element while the list is visible, but I will not count on it. The only way to start in the middle is to choose the default average year.

Personally, I would not bother. Most users know what they can type when focusing the <select> anyway element - I rarely use the mouse to select an option from the <select> drop-down list.

Answer 3

Make the value somewhere in the middle (maybe 1950), selected by default. When someone presses the button, the selected value will be visible, so you can scroll up or down.

Answer 4

You can always take a walk and do something like this with 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 have not tested, but it should work.