How to select a value in dropdown javascript

Question

i have a drop down like this   lt select style  width  280px  id  Mobility  name  Mobility  gt     lt option selected    gt Please Select lt  option gt     lt option gt K lt  option gt     lt option gt 1 lt  option gt     lt option gt 2 lt  option gt     lt option gt 3 lt  option gt     lt option gt 4 lt  option gt     lt option gt 5 lt  option gt     lt option gt 6 lt  option gt     lt option gt 7 lt  option gt     lt option gt 8 lt  option gt     lt option gt 9 lt  option gt     lt option gt 10 lt  option gt     lt option gt 11 lt  option gt     lt option gt 12 lt  option gt   lt  select gt    I use this line to select a value it works in Mozilla not in IE  Why its not working   var element   document getElementById  Mobility    element value    10

User · Answer

This may do it  document forms  someform   elements  someelement   value

User · Answer

Instead of doing   function setSelectedIndex s  v        for   var i   0  i  lt  s options length  i               if   s options i  value    v                 s options i  selected   true              return                      I solved this problem by doing this   function setSelectedValue dropDownList  valueToSet        var option   dropDownList firstChild      for  var i   0  i  lt  dropDownList length  i              if  option text trim   toLowerCase      valueToSet trim   toLowerCase                  option selected   true              return                    option   option nextElementSibling            If you work with strings  you should use the  trim   method  sometimes blank spaces can cause trouble and they are hard to detect in javascript debugging sessions    dropDownList firstChild will actually be your first option tag  Then  by doing option nextElementSibling you can go to the next option tag  so the next choice in your dropdownlist element  If you want to get the number of option tags you can use dropDownList length which I used in the for loop   Hope this helps someone

User · Answer

easiest way is to just use this  document getElementById  mySelect   value    banana     myselect is name of your dropdown banana is just one of items in your dropdown list

User · Answer

Yes  As mentioned in the posts  value property is nonstandard and does not work with IE  You will need to use the selectedIndex property to achieve this  You can refer to the w3schools DOM reference to see the properties of HTML elements  The following link will give you the list of properties you can work with on the select element   http   www w3schools com jsref dom obj select asp  Update  This was not supported during 2011 on IE  As commented by finnTheHuman  it is supported at present

User · Answer

Using Javascript   document getElementById  drpSelectSourceLibrary   value    Seven     Using Jquery      select   prop  selectedIndex   3      This will select the 4th option from the dropdown list

User · Answer

function setSelectedIndex s  v        for   var i   0  i  lt  s options length  i               if   s options i  value    v                 s options i  selected   true              return                      Where s is the dropdown and v is the value

User · Answer

Using some ES6   Get the options first  filter the value based on the option and set the selected attribute to true    x000D   x000D  window onload        gt    x000D   x000D    Array from document querySelector   Mobility   options  x000D       filter x   gt  x value      12   0  x000D       setAttribute  selected   true   x000D   x000D     x000D   lt select style  width  280px  id  Mobility  name  Mobility  gt  x000D     lt option selected disabled gt Please Select lt  option gt  x000D     lt option gt K lt  option gt  x000D     lt option gt 1 lt  option gt  x000D     lt option gt 2 lt  option gt  x000D     lt option gt 3 lt  option gt  x000D     lt option gt 4 lt  option gt  x000D     lt option gt 5 lt  option gt  x000D     lt option gt 6 lt  option gt  x000D     lt option gt 7 lt  option gt  x000D     lt option gt 8 lt  option gt  x000D     lt option gt 9 lt  option gt  x000D     lt option gt 10 lt  option gt  x000D     lt option gt 11 lt  option gt  x000D     lt option gt 12 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

The simplest possible solution if you know the value  document querySelector  option value     value       selected   true

User · Answer

Use the selectedIndex property   document getElementById  Mobility   selectedIndex   12    Option 10   Alternate method   Loop through each value     Get select object var objSelect   document getElementById  Mobility       Set selected setSelectedValue objSelect   10     function setSelectedValue selectObj  valueToSet        for  var i   0  i  lt  selectObj options length  i              if  selectObj options i  text   valueToSet                selectObj options i  selected   true              return

User · Answer

I realize that this is an old question  but I ll post the solution for my use case  in case others run into the same situation I did when implementing James Hill s answer  above    I found this question while trying to solve the same issue   James  answer got me 90  there   However  for my use case  selecting the item from the dropdown also triggered an action on the page from dropdown s onchange event  James  code as written did not trigger this event  at least in Firefox  which I was testing in    As a result  I made the following minor change   function setSelectedValue object  value        for  var i   0  i  lt  object options length  i              if  object options i  text     value                object options i  selected   true              object onchange                return                          Throw exception if option  value  not found      var tag   object nodeName      var str    Option      value      not found        if  object id                  str   str     in       object nodeName toLowerCase                      id      object id                    else if  object name                  str   str     in       object nodeName toLowerCase                      name      object name                    else           str                   throw str      Note the object onchange   call  which I added to the original solution   This calls the handler to make certain that the action on the page occurs   Edit  Added code to throw an exception if option value is not found  this is needed for my use case

[javascript] How to select a value in dropdown javascript?

Examples related to javascript