Setting the selected attribute on a select list using jQuery

Question

I have the following HTML    lt select id  dropdown  gt       lt option gt A lt  option gt       lt option gt B lt  option gt       lt option gt C lt  option gt   lt  select gt    I have the string  B  so I want to set the selected attribute on it so it will be    lt select id  dropdown  gt       lt option gt A lt  option gt       lt option selected  selected  gt B lt  option gt       lt option gt C lt  option gt   lt  select gt    How would I do this in jQuery

User · Answer

If you are using JQuery  since the 1 6 you have to use the  prop   method       select option nth 1    prop  selected   selected

User · Answer

lt select id  cars  gt   lt option value  volvo  gt volvo lt  option gt   lt option value  bmw  gt bmw lt  option gt   lt option value  fiat  gt fiat lt  option gt   lt  select gt   var make    fiat        cars option value      make         attr  selected   selected

User · Answer

You can follow the  selectedIndex strategy of danielrmt  but determine the index based on the text within the option tags like this       dropdown   0  selectedIndex       dropdown option   toArray   map jQuery text  indexOf  B      This works on the original HTML without using value attributes

User · Answer

This can be a solution    document  on  change    select   function                  var value     this  val                  this  find  option value      value         attr  selected    selected

User · Answer

Code   var select   function dropdown  selectedValue        var options     dropdown  find  option        var matches     grep options          function n    return   n  text      selectedValue            matches  attr  selected    selected         Example   select   dropdown    B

User · Answer

You can use pure DOM  See http   www w3schools com htmldom prop select selectedindex asp  document getElementById  dropdown   selectedIndex   1    but jQuery can help       dropdown   selectedIndex   1

User · Answer

select id option eq 0    prop  selected    selected      its good

User · Answer

If you don t mind modifying your HTML a little to include the value attribute of the options  you can significantly reduce the code necessary to do this    lt option gt B lt  option gt    to   lt option value  B  gt B lt  option gt    This will be helpful when you want to do something like    lt option value  IL  gt Illinois lt  option gt    With that  the follow jQuery will make the change      select option value  B     attr  selected   selected      If you decide not to include the use of the value attribute  you will be required to cycle through each option  and manually check its value      select option   each function      if    this  text       B         this  attr  selected   selected

User · Answer

Something along the lines of        select option nth 1    attr  selected   selected

User · Answer

I d iterate through the options  comparing the text to what I want to be selected  then set the selected attribute on that option   Once you find the correct one  terminate the iteration  unless you have a multiselect         dropdown   find  option   each  function           var  this     this         if   this text       B               this attr  selected   selected             return false

[jquery] Setting the selected attribute on a select list using jQuery

Examples related to jquery

Examples related to html

Examples related to html-select