I am wondering if anyone knows any CSS or JS or JQuery magic that will allow a dropdown to open showing the middle range of options. I am aware of the "selected" value, which controls which value is shown when the select is loaded. What I am looking for is a way to then use another value as a pseudo-selected, so that a huge dropdown of options pops out it defaults to midway down the list.
The particular use for for a DOB element on a sign up form. Most of our customers are in their 40s to early 60s, but our dropdown choices range from 1910 to 2010. Ideally when they click on the dropdown it would be nice if it could open to show a range around the 1960s. And thus decrease the amount of scrolling they need to do.
It appears that you want to scroll to the middle of the dropdown list without having to select a value from that range.
If that is the case, this has been attempted before - see:
Select list scroll to a specific option element
I have not seen a reliable cross-browser solution though from previous discussions that uses the native HTML select.
You can always use widgets such as dojo/dijit filteringselect that offer much more functionality and control (such as autocomplete, combobox behavior etc) - these widgets usually use div, ul and li to create the dropdown hence offering you more control via javascript to do positioning and scrolling
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html?testWidget=dijit.form.FilteringSelect
http://livedocs.dojotoolkit.org/dijit/form/FilteringSelect
There are several jquery plugins too that do this select-augmentation
Of course, all this comes at a cost of more code in your page..
If you are using JS widgets elsewhere in your UI, it might make sense to go this route
for jquery in document ready
$("#selectid").val(1960);
