How do I show the selected item in an HTML <select> at the top
- by Michael Meadows
I have an HTML select that looks something like this (values are fake)
<select size="40">
<option value="1">What would you do if I sang out of tune,</option>
<option value="2">Would you stand up and walk out on me?</option>
... more
<option value="156">Lend me your ears, and I'll sing you a song,</option>
<option selected="selected" value="157">I will try not to sing out of key.</option>
<option value="158">Oh, I get by with a little help from my friends.</option>
... more
<option value="507">I get high with a little help from my friends.</option>
<option value="509">Gonna' try with a little from my friends.</option>
</select>
The problem that I have is that when displaying the list after loading the page and the selected option is in the middle of the very long list, IE scrolls the selected option to the top of the list (which is what I want). Firefox, Chrome, Opera, and Safari show it at the bottom (which I don't want). I have to assume that IE is doing it wrong since everyone else shows it at the bottom.
How can I force the browsers to display the selected item at the top of the list. I do not want to put it at the top of the list, I just want it to scroll such that the selected option is at the top.
bonus, it would be even better if I can put it fourth from the top, but I can live without that if it's too difficult.
