Best way to unselect a select in jQuery

Question

lt select size  2  gt   lt option selected  selected  gt Input your option lt  option gt   lt option gt Input your option lt  option gt   lt  select gt    What is the best way  using jQuery  to elegantly unselect the  option

User · Answer

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

User · Answer

select id option selected   prop  selected   false

User · Answer

Simplest Method     select   val      I simply used this on the select itself and it did the trick   I m on jQuery 1 7 1

User · Answer

Another simple way       selectedID   0  selectedIndex   -1

User · Answer

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

User · Answer

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

User · Answer

selectID option selected   each function        this  removeAttr  selected          This would iterate through each item and unselect only the ones which are checked

User · Answer

option selected   attr  selected   false

User · Answer

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

User · Answer

Usually when I use a select menu  each option has a value associated with it  For example   lt select id  nfl  gt     lt option value  Bears Still     gt Chicago Bears lt  option gt     lt option selected  selected  value  Go Pack  gt Green Bay Packers lt  option gt   lt  select gt  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

User · Answer

Set a id in your select  like   lt select id  foo  size  2  gt   Then you can use      foo   prop  selectedIndex   0  change

User · Answer

Use removeAttr        option selected   removeAttr  selected      Or Prop     option selected   prop  selected   false

User · Answer

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

User · Answer

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

User · Answer

option  removeAttr  selected     replace  option  with selected option s selector

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

Examples related to jquery

Examples related to select