How do I dynamically set the selected option of a drop-down list using jQuery JavaScript and HTML

Question

For some reason  I can t get this to work    My options list is populated dynamically using these scripts   function addOption selectId  value  text  selected        var html     lt option value    value    gt   text   lt  option gt        if  selected     on             html     lt option value    value    selected  selected  gt   text   lt  option gt                    selectId  append html      function addSalespersonOption id  name  defsales        addOption  salesperson   id  name  defsales       Here is the HTML    lt td class  text-r  gt  lt label for  salesperson  gt Salesperson  lt  label gt  lt  td gt   lt td gt       lt select id  salesperson  gt           lt option value    gt  select  lt  option gt       lt  select gt   lt  td gt    So far  the output is    lt option value  1266852143634  selected  selected  gt Eric Hunt lt  option gt    The DOM shows this   index              2 disabled           false value               1266852143634  text                Eric Hunt  selected           false defaultSelected    true   But for some reason  when the page is loaded  the dropdown does not display Eric Hunt as pre selected  Nor is anything for that matter   How can I get  selected true  instead of  defaultSelected true      EDIT  As it turns out  the above code works perfectly  thanks to the help of deceze and rosscj2533 s answers from below  The only reason it s not working for me is  I found Ruby code that was overwriting the select elements   Thanks for everyone s help on this   Cheers

User · Accepted Answer

The defaultSelected attribute is not settable  it s just for informational purposes   Quote      The defaultSelected property returns the default value of the selected attribute    This property returns true if an option is selected by default  otherwise it returns false    I think you want      option value valueToSelect    newOption  attr  selected    selected      I e  set the selected attribute of the option you want to select     Without trying to fix your code  here s roughly how I would do it   function buildSelect options  default           assume options     value1    Name 1   value2    Name 2                       default    value1       var  select       lt select gt  lt  select gt         var  option       for  var val in options             option       lt option value      val      gt     options val      lt  option gt             if  val    default                 option attr  selected    selected                       select append  option              return  select      You seem to have a lot of baggage and dependencies already and I can t tell you how to best integrate the selected option into your code without seeing more of it  but hopefully this helps

User · Answer

Your syntax is wrong   You need to call attr with two parameters  like this       salesperson   newOption  attr  defaultSelected    selected      Your current code assigns the value  selected  to the variable defaultSelected  then passes that value to the attr function  which will then return the value of the selected attribute

User · Answer

Here is another way you can change the selected option of a  lt select gt  element in javascript  You can use   document getElementById  salesperson   selectedIndex 1    Setting it to 1 will make the second element of the dropdown selected  The select element index start from 0   Here is a sample code  Check if you can use this type of approach    lt html gt   lt head gt   lt script language  javascript  gt   function changeSelected      document getElementById  salesperson   selectedIndex 1        lt  script gt   lt  head gt   lt body gt   lt form name  f1  gt    lt select id  salesperson   gt       lt option value   gt james lt  option gt      lt option value   gt john lt  option gt     lt  select gt    lt input type  button  value  Change Selected  onClick  changeSelected     gt    lt  form gt   lt  body gt   lt  html gt

User · Answer

Here it goes    x000D   x000D     Select by value x000D     select name  options     find  option value  3     attr  selected  true   x000D   x000D     Select by text x000D       select name  options     find  option contains  Third     attr  selected  true   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D   lt body gt  x000D   lt select name  options  gt  x000D         lt option value  1  gt First lt  option gt  x000D         lt option value  2  gt Second lt  option gt  x000D         lt option value  3  gt Third lt  option gt  x000D   lt  select gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

SCRIPT    lt script type  text javascript  gt        function                gender   val  Male   attr  selected   selected              lt  script gt    HTML   lt select id  gender  selected  selected  gt       lt option gt --Select-- lt  option gt       lt option value  1  gt Male lt  option gt       lt option value  2  gt Female lt  option gt   lt  select gt    Click Here More Details

User · Answer

Your code works for me   When does addSalespersonOption get called   There may be a problem with that call     Also some of your html is a bit off  maybe copy paste problem    but that didn t seem to cause any problems  Your select should look like this    lt select id  salesperson  gt        lt option value    gt  select  lt  option gt    lt  select gt    instead of this    lt select id  salesperson    gt        lt option value   gt  select  lt  option gt    lt  select gt    Edit  When does your options list get dynamically populated   Are you sure you are passing  on  for the defSales value in your call to addSalespersonOption   Try changing that code to this   if  selected     on          alert  setting default selected option to     text       html     lt option value    value    selected  selected  gt   text   lt  option gt          and see if the alert happens and what is says if it does happen   Edit  Working example of my testing  the error undefined is from jsbin  not my code

User · Answer

Pardon my ignorance  but why are you using     salesperson   instead of     salesperson   when dealing with an ID

[javascript] How do I dynamically set the selected option of a drop-down list using jQuery, JavaScript and HTML?

Examples related to javascript

Examples related to jquery

Examples related to html