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?

Use removeAttr...

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

Or Prop

$("option:selected").prop("selected", false)

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.

Simplest Method

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

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

I'm on jQuery 1.7.1.

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/

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

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

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

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

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

Another simple way:

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

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

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.

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

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