Reputation: 63626

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?

Upvotes: 251

Answers (17)

Abdul Rehman

Reputation: 192

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

Upvotes: 1

Amir Sandila

Reputation: 43

This code works for me.

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

Upvotes: 3

premkumar

Reputation: 99

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

Upvotes: 6

TheAlphaGhost

Reputation: 190

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

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

Upvotes: 0

Rafael

Reputation: 108

Another simple way:

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

Upvotes: 4

Joshua Pinter

Reputation: 47471

Simplest Method

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

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

I'm on jQuery 1.7.1.

Upvotes: 34

Blaine Kasten

Reputation: 1693

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

Upvotes: 13

jtaz

Reputation: 129

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.

Upvotes: 1

DinoMyte

Reputation: 8858

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

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

Upvotes: 7

Ei Maung

Reputation: 7153

Use removeAttr...

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

Or Prop

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

Upvotes: 399

Jon

Reputation: 437336

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.

Upvotes: 192

thetoolman

Reputation: 2164

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

Upvotes: 20

coffeeyesplease

Reputation: 1028

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/

Upvotes: 26

Madeswaran Govindan

Reputation: 31

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

Upvotes: 3

mrvisser

Reputation: 944

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

Upvotes: 2

Jeff Paquette

Reputation: 7127

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

});

Upvotes: 6

Brandon Henry

Reputation: 3720

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

Upvotes: 3

Best way to unselect a &lt;select&gt; in jQuery?

Answers (17)

Simplest Method

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

Related Questions

Best way to unselect a <select> in jQuery?

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