Best way to unselect a <select> in jQuery?

Question

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

How to do it elegantly?

Answer 1

$(option).removeAttr('selected') //replace 'option' with selected option's selector

Answer 2

A quick google found this post that describes how to do what you want for both single and multiple select lists in IE. The solution seems pretty elegant as well:

$('#clickme').click(function() {
        $('#selectmenu option').attr('selected', false);

});

Answer 3

Use removeAttr...

$("option:selected").removeAttr("selected");

Answer 4

$("option:selected").attr("selected", false);

Answer 5

Answers so far only work for multiple selects in IE6/7; for the more common non-multi select, you need to use:

$("#selectID").attr('selectedIndex', '-1');

This is explained in the post linked by flyfishr64. If you look at it, you will see how there are 2 cases - multi / non-multi. There is nothing stopping you chaning both for a complete solution:

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");