How do you select a particular option in a SELECT element in jQuery

Question

If you know the Index  Value or Text  also if you don t have an ID for a direct reference   This  this and this are all helpful answers   Example markup   lt div class  selDiv  gt     lt select class  opts  gt       lt option selected value  DEFAULT  gt Default lt  option gt       lt option value  SEL1  gt Selection 1 lt  option gt       lt option value  SEL2  gt Selection 2 lt  option gt     lt  select gt   lt  div gt

User · Answer

There are a few suggestions why you should use prop instead of attr. Definitely use prop as I've tested both and attr will give you weird results except for the simplest of cases.

I wanted a solution where selecting from an arbitrarily grouped select options automatically selected another select input on that same page. So for instance, if you have 2 dropdowns - one for countries, and the other for continents. In this scenario, selecting any country automatically selected that country's continent on the other continent dropdown.

_x000D_

$("#country").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent correctly with prop
  $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});



$("#country2").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent wrongly with attr
  $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});

_x000D_

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <form>
    <h4 class="text-success">Props to the good stuff ;) </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country" id="country">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
  <hr>

  <form>
    <h4 class="text-danger"> Attributing the bad stuff to attr </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country-2" id="country2">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent2">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
</div>

_x000D_

As seen in the code snippet, prop works correctly every time, but attr fails to select properly once the option has been selected once.

Keypoint: We're usually interested in the property of the attribute, so its safer to use prop over attr in most situations.

User · Answer

You could name the select and use this      select name  theNameYouChose     find  option value  theValueYouWantSelected     attr  selected  true     It should select the option you want

User · Answer

Answering my own question for documentation  I m sure there are other ways to accomplish this  but this works and this code is tested    lt html gt   lt head gt   lt script language  Javascript  src  javascript jquery-1 2 6 min js  gt  lt  script gt   lt script type  text JavaScript  gt     function             update   bind  click           bind the click event to a div         function                 var selectOption       selDiv   children   opts                 var  this     this  next   children   opts                    selectOption  find  option index  0     attr  selected   selected                  selectOption  find  option value  DEFAULT     attr  selected   selected                  selectOption  find  option text  Default     attr  selected   selected                     this  find  option value  DEFAULT     attr  selected   selected                   this  find  option text  Default     attr  selected   selected                   this  find  option index  0     attr  selected   selected                END Bind        End eventlistener   lt  script gt   lt  head gt   lt body gt   lt div class  update  style  height 50px  color blue  cursor pointer   gt Update lt  div gt   lt div class  selDiv  gt           lt select class  opts  gt               lt option selected value  DEFAULT  gt Default lt  option gt               lt option value  SEL1  gt Selection 1 lt  option gt               lt option value  SEL2  gt Selection 2 lt  option gt           lt  select gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Try this  you just use select field id instead of  id  ie  select name   instead of option value use your select option value    lt script gt        document  ready function         id option value  option value     attr  selected  true               lt  script gt

User · Answer

select option data-id-estado  3     prop  selected  true  trigger  change      or      select option value  myValue     prop  selected  true  trigger  change

User · Answer

This will reset your select box with  -- Please Select --             lt script gt        document  ready function                 gate option value       prop  selected   true                lt  script gt

User · Answer

There are a number of ways to do this  but the cleanest approach has been lost among the top answers and loads of arguments over val    Also some methods changed as of jQuery 1 6  so this needs an update   For the following examples I will assume the variable  select is a jQuery object pointing at the desired  lt select gt  tag  e g  via the following   var  select       selDiv  opts      Note 1 - use val   for value matches   For value matching  using val   is far simpler than using an attribute selector  https   jsfiddle net yz7tu49b 6    select val  SEL2      The setter version of  val   is implemented on select tags by setting the selected property of a matching option with the same value  so works just fine on all modern browsers   Note 2 - use prop  selected   true    If you want to set the selected state of an option directly  you can use prop  not attr  with a boolean parameter  rather than the text value selected    e g  https   jsfiddle net yz7tu49b    option prop  selected   true       Will add selected  selected  to the tag   Note 3 - allow for unknown values   If you use val   to select an  lt option gt   but the val is not matched  might happen depending on the source of the values   then  nothing  is selected and  select val   will return null   So  for the example shown  and for the sake of robustness  you could use something like this https   jsfiddle net 1250Ldqn    var  select       selDiv  opts     select val  SEL2    if   select val      null       select val  DEFAULT        Note 4 - exact text match   If you want to match by exact text  you can use a filter with function  e g  https   jsfiddle net yz7tu49b 2    var  select       selDiv  opts     select children   filter function        return this text     Selection 2      prop  selected   true     although if you may have extra whitespace you may want to add a trim to the check as in       return   trim this text      some value to match     Note 5 - match by index  If you want to match by index just index the children of the select e g  https   jsfiddle net yz7tu49b 3   var  select       selDiv  opts    var index   2   select children   index  selected   true    Although I tend to avoid direct DOM properties in favour of jQuery nowadays  to future-proof code  so that could also be done as https   jsfiddle net yz7tu49b 5    var  select       selDiv  opts    var index   2   select children   eq index  prop  selected   true     Note 6 - use change   to fire the new selection  In all the above cases  the change event does not fire  This is by design so that you do not wind up with recursive change events   To generate the change event  if required  just add a call to  change   to the jQuery select object  e g  the very first simplest example becomes https   jsfiddle net yz7tu49b 7   var  select       selDiv  opts     select val  SEL2   change      There are also plenty of other ways to find the elements using attribute selectors  like  value  SEL2    but you have to remember attribute selectors are relatively slow compared to all these other options

User · Answer

This will reset your select box with  -- Please Select --             lt script gt        document  ready function                 gate option value       prop  selected   true                lt  script gt

User · Answer

select option data-id-estado  3     prop  selected  true  trigger  change      or      select option value  myValue     prop  selected  true  trigger  change

User · Answer

The    select   val  the value    looks the right solution and if you have data table rows then    row find   component   val  All

User · Answer

For setting select value with triggering selected       select opts   val  SEL1   change        For setting option from a scope       selDiv option value  SEL1          attr  selected    selected        change      This code use selector to find out the select object with condition  then change the selected attribute by attr       Futher  I recommend to add change   event after setting attribute to selected  by doing this the code will close to changing select by user

User · Answer

The    select   val  the value    looks the right solution and if you have data table rows then    row find   component   val  All

User · Answer

Try this  you just use select field id instead of  id  ie  select name   instead of option value use your select option value    lt script gt        document  ready function         id option value  option value     attr  selected  true               lt  script gt

User · Answer

For setting select value with triggering selected       select opts   val  SEL1   change        For setting option from a scope       selDiv option value  SEL1          attr  selected    selected        change      This code use selector to find out the select object with condition  then change the selected attribute by attr       Futher  I recommend to add change   event after setting attribute to selected  by doing this the code will close to changing select by user

User · Answer

Thanks for the question  Hope this piece of code will work for you   var val      select opts visible option selected    val

User · Answer

There are a few suggestions why you should use prop instead of attr. Definitely use prop as I've tested both and attr will give you weird results except for the simplest of cases.

I wanted a solution where selecting from an arbitrarily grouped select options automatically selected another select input on that same page. So for instance, if you have 2 dropdowns - one for countries, and the other for continents. In this scenario, selecting any country automatically selected that country's continent on the other continent dropdown.

_x000D_

$("#country").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent correctly with prop
  $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});



$("#country2").on("change", function() {
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent wrongly with attr
  $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});

_x000D_

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <form>
    <h4 class="text-success">Props to the good stuff ;) </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country" id="country">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
  <hr>

  <form>
    <h4 class="text-danger"> Attributing the bad stuff to attr </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country-2" id="country2">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent2">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
</div>

_x000D_

As seen in the code snippet, prop works correctly every time, but attr fails to select properly once the option has been selected once.

Keypoint: We're usually interested in the property of the attribute, so its safer to use prop over attr in most situations.

User · Answer

By value  what worked for me with jQuery 1 7 was the below code  try this       id option value theOptionValue    prop  selected    selected   change

User · Answer

Thanks for the question  Hope this piece of code will work for you   var val      select opts visible option selected    val

User · Answer

i ll go with -     select my-select option    each function     this selected    this text    myVal

User · Answer

I use this  when i know the index of the list       yourlist  nth 1    prop  selected   selected   change      This allows the list to change  and fire the change event  The   nth n   is counting from index 0

User · Answer

A selector to get the middle option-element by value is      selDiv option value  SEL1       For an index       selDiv option eq 1      For a known text       selDiv option contains  Selection 1       EDIT  As commented above the OP might have been after changing the selected item of the dropdown  In version 1 6 and higher the prop   method is recommended       selDiv option eq 1    prop  selected   true    In older versions       selDiv option eq 1    attr  selected    selected     EDIT2  after Ryan s comment  A match on  Selection 10  might be unwanted  I found no selector to match the full text  but a filter works        selDiv option        filter function i  e    return   e  text       Selection 1      EDIT3  Use caution with   e  text   as it can contain a newline making the comparison fail   This happens when the options are implicitly closed  no  lt  option gt  tag     lt select     gt   lt option value  1  gt Selection 1  lt option value  2  gt Selection 2       lt  select gt    If you simply use e text any extra whitespace like the trailing newline will be removed  making the comparison more robust

User · Answer

Exactly it will work try this below methods     For normal select option    lt script gt            document  ready function             id   val  select value here                        lt  script gt       For select 2 option trigger option need to use    lt script gt                document  ready function                 id   val  select value here   trigger  change                                lt  script gt

User · Answer

Answering my own question for documentation  I m sure there are other ways to accomplish this  but this works and this code is tested    lt html gt   lt head gt   lt script language  Javascript  src  javascript jquery-1 2 6 min js  gt  lt  script gt   lt script type  text JavaScript  gt     function             update   bind  click           bind the click event to a div         function                 var selectOption       selDiv   children   opts                 var  this     this  next   children   opts                    selectOption  find  option index  0     attr  selected   selected                  selectOption  find  option value  DEFAULT     attr  selected   selected                  selectOption  find  option text  Default     attr  selected   selected                     this  find  option value  DEFAULT     attr  selected   selected                   this  find  option text  Default     attr  selected   selected                   this  find  option index  0     attr  selected   selected                END Bind        End eventlistener   lt  script gt   lt  head gt   lt body gt   lt div class  update  style  height 50px  color blue  cursor pointer   gt Update lt  div gt   lt div class  selDiv  gt           lt select class  opts  gt               lt option selected value  DEFAULT  gt Default lt  option gt               lt option value  SEL1  gt Selection 1 lt  option gt               lt option value  SEL2  gt Selection 2 lt  option gt           lt  select gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Answering my own question for documentation  I m sure there are other ways to accomplish this  but this works and this code is tested    lt html gt   lt head gt   lt script language  Javascript  src  javascript jquery-1 2 6 min js  gt  lt  script gt   lt script type  text JavaScript  gt     function             update   bind  click           bind the click event to a div         function                 var selectOption       selDiv   children   opts                 var  this     this  next   children   opts                    selectOption  find  option index  0     attr  selected   selected                  selectOption  find  option value  DEFAULT     attr  selected   selected                  selectOption  find  option text  Default     attr  selected   selected                     this  find  option value  DEFAULT     attr  selected   selected                   this  find  option text  Default     attr  selected   selected                   this  find  option index  0     attr  selected   selected                END Bind        End eventlistener   lt  script gt   lt  head gt   lt body gt   lt div class  update  style  height 50px  color blue  cursor pointer   gt Update lt  div gt   lt div class  selDiv  gt           lt select class  opts  gt               lt option selected value  DEFAULT  gt Default lt  option gt               lt option value  SEL1  gt Selection 1 lt  option gt               lt option value  SEL2  gt Selection 2 lt  option gt           lt  select gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Using jquery-2 1 4  I found the following answer to work for me       MySelectionBox   val 123  change      If you have a string value try the following       MySelectionBox   val  extra thing   change      Other examples did not work for me so that s why I m adding this answer   I found the original answer at   https   forum jquery com topic how-to-dynamically-select-option-in-dropdown-menu

User · Answer

There are a number of ways to do this  but the cleanest approach has been lost among the top answers and loads of arguments over val    Also some methods changed as of jQuery 1 6  so this needs an update   For the following examples I will assume the variable  select is a jQuery object pointing at the desired  lt select gt  tag  e g  via the following   var  select       selDiv  opts      Note 1 - use val   for value matches   For value matching  using val   is far simpler than using an attribute selector  https   jsfiddle net yz7tu49b 6    select val  SEL2      The setter version of  val   is implemented on select tags by setting the selected property of a matching option with the same value  so works just fine on all modern browsers   Note 2 - use prop  selected   true    If you want to set the selected state of an option directly  you can use prop  not attr  with a boolean parameter  rather than the text value selected    e g  https   jsfiddle net yz7tu49b    option prop  selected   true       Will add selected  selected  to the tag   Note 3 - allow for unknown values   If you use val   to select an  lt option gt   but the val is not matched  might happen depending on the source of the values   then  nothing  is selected and  select val   will return null   So  for the example shown  and for the sake of robustness  you could use something like this https   jsfiddle net 1250Ldqn    var  select       selDiv  opts     select val  SEL2    if   select val      null       select val  DEFAULT        Note 4 - exact text match   If you want to match by exact text  you can use a filter with function  e g  https   jsfiddle net yz7tu49b 2    var  select       selDiv  opts     select children   filter function        return this text     Selection 2      prop  selected   true     although if you may have extra whitespace you may want to add a trim to the check as in       return   trim this text      some value to match     Note 5 - match by index  If you want to match by index just index the children of the select e g  https   jsfiddle net yz7tu49b 3   var  select       selDiv  opts    var index   2   select children   index  selected   true    Although I tend to avoid direct DOM properties in favour of jQuery nowadays  to future-proof code  so that could also be done as https   jsfiddle net yz7tu49b 5    var  select       selDiv  opts    var index   2   select children   eq index  prop  selected   true     Note 6 - use change   to fire the new selection  In all the above cases  the change event does not fire  This is by design so that you do not wind up with recursive change events   To generate the change event  if required  just add a call to  change   to the jQuery select object  e g  the very first simplest example becomes https   jsfiddle net yz7tu49b 7   var  select       selDiv  opts     select val  SEL2   change      There are also plenty of other ways to find the elements using attribute selectors  like  value  SEL2    but you have to remember attribute selectors are relatively slow compared to all these other options

User · Answer

A selector to get the middle option-element by value is      selDiv option value  SEL1       For an index       selDiv option eq 1      For a known text       selDiv option contains  Selection 1       EDIT  As commented above the OP might have been after changing the selected item of the dropdown  In version 1 6 and higher the prop   method is recommended       selDiv option eq 1    prop  selected   true    In older versions       selDiv option eq 1    attr  selected    selected     EDIT2  after Ryan s comment  A match on  Selection 10  might be unwanted  I found no selector to match the full text  but a filter works        selDiv option        filter function i  e    return   e  text       Selection 1      EDIT3  Use caution with   e  text   as it can contain a newline making the comparison fail   This happens when the options are implicitly closed  no  lt  option gt  tag     lt select     gt   lt option value  1  gt Selection 1  lt option value  2  gt Selection 2       lt  select gt    If you simply use e text any extra whitespace like the trailing newline will be removed  making the comparison more robust

User · Answer

elem  find  option value      value         attr  selected    selected

User · Answer

By value  what worked for me with jQuery 1 7 was the below code  try this       id option value theOptionValue    prop  selected    selected   change

User · Answer

You could name the select and use this      select name  theNameYouChose     find  option value  theValueYouWantSelected     attr  selected  true     It should select the option you want

User · Answer

You can just use val   method      select   val  the value

User · Answer

Answering my own question for documentation  I m sure there are other ways to accomplish this  but this works and this code is tested    lt html gt   lt head gt   lt script language  Javascript  src  javascript jquery-1 2 6 min js  gt  lt  script gt   lt script type  text JavaScript  gt     function             update   bind  click           bind the click event to a div         function                 var selectOption       selDiv   children   opts                 var  this     this  next   children   opts                    selectOption  find  option index  0     attr  selected   selected                  selectOption  find  option value  DEFAULT     attr  selected   selected                  selectOption  find  option text  Default     attr  selected   selected                     this  find  option value  DEFAULT     attr  selected   selected                   this  find  option text  Default     attr  selected   selected                   this  find  option index  0     attr  selected   selected                END Bind        End eventlistener   lt  script gt   lt  head gt   lt body gt   lt div class  update  style  height 50px  color blue  cursor pointer   gt Update lt  div gt   lt div class  selDiv  gt           lt select class  opts  gt               lt option selected value  DEFAULT  gt Default lt  option gt               lt option value  SEL1  gt Selection 1 lt  option gt               lt option value  SEL2  gt Selection 2 lt  option gt           lt  select gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

You can just use val   method      select   val  the value

User · Answer

None of the methods above provided the solution I needed so I figured I would provide what worked for me       element option value  no     attr  selected    selected

User · Answer

I use this  when i know the index of the list       yourlist  nth 1    prop  selected   selected   change      This allows the list to change  and fire the change event  The   nth n   is counting from index 0

User · Answer

if you want to not use jQuery  you can use below code   document getElementById  mySelect   selectedIndex    2

User · Answer

elem  find  option value      value         attr  selected    selected

User · Answer

Using jquery-2 1 4  I found the following answer to work for me       MySelectionBox   val 123  change      If you have a string value try the following       MySelectionBox   val  extra thing   change      Other examples did not work for me so that s why I m adding this answer   I found the original answer at   https   forum jquery com topic how-to-dynamically-select-option-in-dropdown-menu

User · Answer

i ll go with -     select my-select option    each function     this selected    this text    myVal

User · Answer

For Jquery chosen if you send the attribute to function and need to update-select option      yourElement option value    yourValue       attr  selected    selected        editLocationCity   chosen   change        editLocationCity   trigger  liszt updated

User · Answer

None of the methods above provided the solution I needed so I figured I would provide what worked for me       element option value  no     attr  selected    selected

User · Answer

For Jquery chosen if you send the attribute to function and need to update-select option      yourElement option value    yourValue       attr  selected    selected        editLocationCity   chosen   change        editLocationCity   trigger  liszt updated

User · Answer

Exactly it will work try this below methods     For normal select option    lt script gt            document  ready function             id   val  select value here                        lt  script gt       For select 2 option trigger option need to use    lt script gt                document  ready function                 id   val  select value here   trigger  change                                lt  script gt

User · Answer

if you want to not use jQuery  you can use below code   document getElementById  mySelect   selectedIndex    2

[jquery] How do you select a particular option in a SELECT element in jQuery?

Examples related to jquery