Changing the selected option of an HTML Select element

Question

In my HTML  I have a  lt select gt  with three  lt option gt  elements   I want to use jQuery to check each option s value against a Javascript var   If one matches  I want to set the selected attribute of that option   How would I do that

User · Answer

None of the examples using jquery in here are actually correct as they will leave the select displaying the first entry even though value has been changed.

The right way to select Alaska and have the select show the right item as selected using:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

With jquery would be:

$('#state').val('AK').change();

User · Answer

I used this after updating a register and changed the state of request via ajax  then I do a query with the new state in the same script and put it in the select tag element new state to update the view   var objSel   document getElementById  selectObj    objSel selectedIndex   elementSelected    I hope this is useful

User · Answer

Excellent answers - here s the D3 version for anyone looking    lt select id  sel  gt       lt option gt Cat lt  option gt       lt option gt Dog lt  option gt       lt option gt Fish lt  option gt   lt  select gt   lt script gt      d3 select   sel   property  value    Fish     lt  script gt

User · Answer

Slightly neater Vanilla JS version  Assuming you ve already fixed nodeList missing  forEach     NodeList prototype forEach   Array prototype forEach   Just   var requiredValue    i-50332a31        selectBox   document querySelector  select    selectBox childNodes forEach function element  index     if   element value     requiredValue         selectBox selectedIndex   index

User · Answer

After a lot of searching I tried  kzh on select list where I only know option inner text not value attribute   this code based on select answer I used it to change select option according to current page urlon this format  http   www example com index php u Steve   lt select id  sel  gt       lt option gt Joe lt  option gt       lt option gt Steve lt  option gt       lt option gt Jack lt  option gt   lt  select gt   lt script gt      var val   window location href split  u    1      to filter  u  query      var sel   document getElementById  sel        var opts   sel options      for var opt  j   0  opt   opts j   j                 search are based on text inside option Attr         if opt text    val                sel selectedIndex   j              break                   lt  script gt    This  will keeps url parameters shown as  selected to make it more user friendly and the visitor knows what page or profile he is currently viewing

User · Answer

Markup   lt select id  my select  gt       lt option value  1  gt First lt  option gt       lt option value  2  gt Second lt  option gt       lt option value  3  gt Third lt  option gt   lt  select gt    jQuery  var my value   2      my select option   each function        var  this     this      cache this jQuery object to avoid overhead      if   this val      my value       if this option s value is equal to our value          this prop  selected   true      select this option         return false     break the loop  no need to look further             Demo

User · Answer

I want to change the select element s selected option s both value  amp  textContent  what we see  to  Mango    Simplest code that worked is below   var newValue1    Mango   var selectElement   document getElementById  myselectid    selectElement options selectElement selectedIndex  value   newValue1  selectElement options selectElement selectedIndex  textContent   newValue1    Hope that helps someone  Best of luck  Up vote if this helped you

User · Answer

I used almost all of the answers posted here but not comfortable with that so i dig one step furter and found easy solution that fits my need and feel worth sharing with you guys  Instead of iteration all over the options or using JQuery you can do using core JS in simple steps   Example   lt select id  org list  gt     lt option value  23  gt IBM lt  option gt     lt option value  33  gt DELL lt  option gt     lt option value  25  gt SONY lt  option gt     lt option value  29  gt HP lt  option gt   lt  select gt    So you must know the value of the option to select   function selectOrganization id       org list document getElementById  org list        org list selectedIndex org list querySelector  option value    id       index      How to Use   selectOrganization 25     this will select SONY from option List   Your comments are welcome     AzmatHunzai

User · Answer

You can change the value of the select element  which changes the selected option to the one with that value  using JavaScript   document getElementById  sel   value    bike               DEMO

User · Answer

Vanilla JavaScript  Using plain old JavaScript    x000D   x000D  var val    Fish   x000D  var sel   document getElementById  sel    x000D  document getElementById  btn   onclick   function     x000D    var opts   sel options  x000D    for  var opt  j   0  opt   opts j   j      x000D      if  opt value    val    x000D        sel selectedIndex   j  x000D        break  x000D        x000D      x000D    x000D   lt select id  sel  gt  x000D       lt option gt Cat lt  option gt  x000D       lt option gt Dog lt  option gt  x000D       lt option gt Fish lt  option gt  x000D   lt  select gt  x000D   lt button id  btn  gt Select Fish lt  button gt  x000D   x000D   x000D    jQuery  But if you really want to use jQuery   var val    Fish       btn   on  click   function           sel   val val          x000D   x000D  var val    Fish   x000D      btn   on  click   function     x000D        sel   val val   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt select id  sel  gt  x000D       lt option gt Cat lt  option gt  x000D       lt option gt Dog lt  option gt  x000D       lt option gt Fish lt  option gt  x000D   lt  select gt  x000D   lt button id  btn  gt Select Fish lt  button gt  x000D   x000D   x000D    jQuery - Using Value Attributes  In case your options have value attributes which differ from their text content and you want to select via text content    lt select id  sel  gt       lt option value  1  gt Cat lt  option gt       lt option value  2  gt Dog lt  option gt       lt option value  3  gt Fish lt  option gt   lt  select gt   lt script gt      var val    Fish           sel option contains     val        prop  selected  true     lt  script gt    Demo  But if you do have the above set up and want to select by value using jQuery  you can do as before   var val   3      sel   val val     Modern DOM  For the browsers that support document querySelector and the HTMLOptionElement  selected property  this is a more succinct way of accomplishing this task   var val   3      document querySelector   sel  value      val         selected   true    Demo  Knockout js   lt select data-bind  value  val  gt       lt option value  1  gt Cat lt  option gt       lt option value  2  gt Dog lt  option gt       lt option value  3  gt Fish lt  option gt   lt  select gt   lt script gt      var viewModel             val  ko observable              ko applyBindings viewModel       viewModel val 3    lt  script gt    Demo  Polymer   lt template id  template  is  dom-bind  gt       lt select value     val     gt           lt option value  1  gt Cat lt  option gt           lt option value  2  gt Dog lt  option gt           lt option value  3  gt Fish lt  option gt       lt  select gt   lt  template gt   lt script gt      template val   3   lt  script gt    Demo  Angular 2  Note  this has not been updated for the final stable release    lt app id  app  gt       lt select  value   val  gt           lt option value  1  gt Cat lt  option gt           lt option value  2  gt Dog lt  option gt           lt option value  3  gt Fish lt  option gt       lt  select gt   lt  app gt   lt script gt      var App   ng Component  selector   app             View  template  app innerHTML            Class  constructor   function              ng bootstrap App  then function app            app  hostComponent instance val   3           lt  script gt    Demo  Vue 2   lt div id  app  gt       lt select v-model  val  gt           lt option value  1  gt Cat lt  option gt           lt option value  2  gt Dog lt  option gt           lt option value  3  gt Fish lt  option gt       lt  select gt   lt  div gt   lt script gt      var app   new Vue           el    app           data                    val  null                     mounted  function                     this val   3                     lt  script gt    Demo

User · Answer

Test this Demo   Selecting Option based on its value  var vals    2  c        option   each function       var  t     this       for  var n vals length  n--          if   t val      vals n              t prop  selected   true            return               Selecting Option based on its text  var vals     Two   CCC                         what we re looking for is different     option   each function       var  t     this       for  var n vals length  n--          if   t text      vals n                  method used is different           t prop  selected   true            return                   Supporting HTML   lt select gt      lt option value    gt  lt  option gt      lt option value  1  gt One lt  option gt      lt option value  2  gt Two lt  option gt      lt option value  3  gt Three lt  option gt   lt  select gt    lt select gt      lt option value    gt  lt  option gt      lt option value  a  gt AAA lt  option gt      lt option value  b  gt BBB lt  option gt      lt option value  c  gt CCC lt  option gt   lt  select gt

[javascript] Changing the selected option of an HTML Select element

Examples related to javascript

Examples related to jquery

Examples related to html