How do I change an HTML selected option using JavaScript

Question

I have option menu like this    lt form name  AddAndEdit  gt      lt select name  list  id  personlist  gt         lt option value  11  gt Person1 lt  option gt         lt option value  27  gt Person2 lt  option gt         lt option value  17  gt Person3 lt  option gt         lt option value  10  gt Person4 lt  option gt         lt option value  7  gt Person5 lt  option gt         lt option value  32  gt Person6 lt  option gt         lt option value  18  gt Person7 lt  option gt         lt option value  29  gt Person8 lt  option gt         lt option value  28  gt Person9 lt  option gt         lt option value  34  gt Person10 lt  option gt         lt option value  12  gt Person11 lt  option gt         lt option value  19  gt Person12 lt  option gt      lt  select gt   lt  form gt    And now I want to change the selected option by using an href  For example    lt a href  javascript void 0      onclick  document getElementById  personlist   getElementsByTagName  option   11  selected    selected    gt change lt  a gt    But I want to select the option with value 11  Person1   not Person12   How do I change this code

User · Answer

You could also change select options selectedIndex DOM attribute like this    x000D   x000D  function selectOption index    x000D    document getElementById  select id   options selectedIndex   index  x000D    x000D   lt p gt  x000D   lt select id  select id  gt  x000D     lt option selected gt first option lt  option gt  x000D     lt option gt second option lt  option gt  x000D     lt option gt third option lt  option gt  x000D   lt  select gt  x000D   lt  p gt  x000D   lt p gt  x000D     lt button onclick  selectOption 0    gt Select first option lt  button gt  x000D     lt button onclick  selectOption 1    gt Select second option lt  button gt  x000D     lt button onclick  selectOption 2    gt Select third option lt  button gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Tools as pure JavaScript code for handling Selectbox   Graphical Understanding      Image - A          Image - B          Image - C     Updated - 25-June-2019   Fiddler DEMO  JavaScript Code          Empty Select Box     param eid Element ID     param value text     param text text     author Neeraj Singh     function emptySelectBoxById eid  value  text        document getElementById eid  innerHTML     lt option value      value      gt     text     lt  option gt               Reset Select Box     param eid Element ID      function resetSelectBoxById eid        document getElementById eid  options 0  selected    selected              Set Select Box Selection By Index     param eid Element ID     param eindx Element Index      function setSelectBoxByIndex eid  eindx        document getElementById eid  getElementsByTagName  option   eindx  selected    selected         or     document getElementById eid  options eindx  selected    selected              Set Select Box Selection By Value     param eid Element ID     param eval Element Index     function setSelectBoxByValue eid  eval        document getElementById eid  value   eval             Set Select Box Selection By Text     param eid Element ID     param eval Element Index     function setSelectBoxByText eid  etxt        var eid   document getElementById eid       for  var i   0  i  lt  eid options length    i            if  eid options i  text     etxt              eid options i  selected   true                   Get Select Box Text By ID     param eid Element ID     return string      function getSelectBoxText eid        return document getElementById eid  options document getElementById eid  selectedIndex  text             Get Select Box Value By ID     param eid Element ID     return string      function getSelectBoxValue id        return document getElementById id  options document getElementById id  selectedIndex  value

User · Answer

If you are adding the option with javascript  function AddNewOption userRoutes  text  id         var option   document createElement  option        option text   text      option value   id      option selected    selected       userdRoutes add option

User · Answer

You can use JQuery also    document  ready function            personlist   val  10

User · Answer

It s an old post  but if anyone is still looking for solution to this kind of problem  here is what I came up with    lt script gt    document addEventListener  DOMContentLoaded   function e        document forms  AddAndEdit   elements  list   value   11         lt  script gt

User · Answer

mySelect value   myValue    Where mySelect is your selection box  and myValue is the value you want to change it to

User · Answer

An array Index will start from 0  If you want value 11  Person1   you will get it with position getElementsByTagName  option   10  selected

User · Answer

Your own answer technically wasn t incorrect  but you got the index wrong since indexes start at 0  not 1  That s why you got the wrong selection  document getElementById  personlist   getElementsByTagName  option     10    selected    selected    Also  your answer is actually a good one for  cases where the tags aren t entirely English or numeric  If they use  for example  Asian characters  the other solutions telling you to use  value   may not always function and will just not do anything  Selecting by tag is a good way to ignore the actual text and select by the element itself

User · Answer

I believe that the blog post JavaScript Beginners     Select a dropdown option by value might help you    lt a href  javascript void 0    onclick  selectItemByValue document getElementById  personlist   11   gt change lt  a gt   function selectItemByValue elmnt  value      for var i 0  i  lt  elmnt options length  i            if elmnt options i  value     value          elmnt selectedIndex   i        break

User · Answer

Change  document getElementById  personlist   getElementsByTagName  option   11  selected    selected    to  document getElementById  personlist   value Person ID

[javascript] How do I change an HTML selected option using JavaScript?

Examples related to javascript

Examples related to html-select