Question

I have a select element with some options:

<select id="choose">
    <option id="first" value='null'>choose</option>
    <option id="g1" value='1'>gate1</option>
    <option id="g2" value='2'>gate2</option>
</select> 

The user selects an option and submits the form. The data is stored.
Anytime the user comes back I want the previously saved option to be display
at the top of the select element, instead of choose.

I do it e.g. this way

$("#choose").val("2");

It just highlights the option in the list, but choose is still the first element. How do I accomplish that?

Answer 1

Sounds like you want to move the selected item to the top after they select it.

Just bind to the change event and the find the selected option and prepend it to the #choose

var choose = $("#choose").bind('change',function(){
    choose.find('option:selected').prependTo(choose);
});

http://jsfiddle.net/petersendidit/ZuhqS/1/