[jquery] Best way to unselect a <select> in jQuery?

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

What is the best way, using jQuery, to elegantly unselect the option?

There are lots of answers here but unfortunately all of them are quite old and therefore rely on attr/removeAttr which is really not the way to go.

@coffeeyesplease correctly mentions that a good, cross-browser solution is to use

$("select").val([]);

Another good cross-browser solution is

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);

You can see it run a self-test here. Tested on IE 7/8/9, FF 11, Chrome 19.

Set a id in your select, like:
<select id="foo" size="2">

Then you can use:
$("#foo").prop("selectedIndex", 0).change();

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);

}); 

$("#select_id option:selected").prop("selected", false);

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').find("option:selected").removeAttr("selected");

Usually when I use a select menu, each option has a value associated with it. For example

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($('#nfl').val()) logs "Go Pack" to the console
Set the value to an empty string $('#nfl').val("")
console.log($('#nfl').val()) logs "" to the console

Now this doesn't remove the selected attribute from the option but all I really want is the value.

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

It's a been a while since asked, and I haven't tested this on older browsers but it seems to me a much simpler answer is

$("#selectID").val([]);

.val() works for select as well http://api.jquery.com/val/

Another simple way:

$("#selectedID")[0].selectedIndex = -1

Simplest Method

$('select').val('')

I simply used this on the select itself and it did the trick.

I'm on jQuery 1.7.1.

Oh jquery.

Since there is yet a native javascript approach, I feel the need to provide one.

var select = document.querySelector('select'); //hopefully you'll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

And just to show you how much faster this is: benchmark

$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

This would iterate through each item and unselect only the ones which are checked

Thanks a lot for the solution.

The solution for single choice combo list works perfectly. I found this after searching on many sites.

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

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