<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?
<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.
$('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");
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();
To unselect an option in an element using jQuery, you can simply set the selectedIndex property of the element to -1. This will remove any selected option and leave the dropdown empty.
Here's how you can do it:
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
// Using jQuery to unselect the <select> element
$("#mySelect").prop("selectedIndex", -1);
In this example, the element with the ID "mySelect" will have its selected option removed when the jQuery code is executed.
Note: Setting selectedIndex to -1 effectively unselects all options, but it won't trigger any "change" event on the element. If you need to handle any behaviour when the selection changes, you may need to trigger the event manually after unselecting the option:
$("#mySelect").prop("selectedIndex", -1).trigger("change");