How do I programmatically set the value of a select box element using JavaScript

Question

I have the following HTML  lt select gt  element    lt select id  leaveCode  name  leaveCode  gt     lt option value  10  gt Annual Leave lt  option gt     lt option value  11  gt Medical Leave lt  option gt     lt option value  14  gt Long Service lt  option gt     lt option value  17  gt Leave Without Pay lt  option gt   lt  select gt    Using a JavaScript function with the leaveCode number as a parameter  how do I select the appropriate option in the list

User · Answer

Why not add a variable for the element s Id and make it a reusable function   function SelectElement selectElementId  valueToSelect            var element   document getElementById selectElementId       element value   valueToSelect

User · Answer

Suppose your form is named form1   function selectValue val      var lc   document form1 leaveCode    for  i 0  i amp lt lc length  i            if  lc options i  value    val                lc selectedIndex   i          return

User · Answer

function foo value        var e   document getElementById  leaveCode        if e  e value   value

User · Answer

Suppose your form is named form1   function selectValue val      var lc   document form1 leaveCode    for  i 0  i amp lt lc length  i            if  lc options i  value    val                lc selectedIndex   i          return

User · Answer

function foo value        var e   document getElementById  leaveCode        if e  e value   value

User · Answer

Why not add a variable for the element s Id and make it a reusable function   function SelectElement selectElementId  valueToSelect            var element   document getElementById selectElementId       element value   valueToSelect

User · Answer

I m afraid I m unable to test this at the moment  but in the past  I believe I had to give each option tag an ID  and then I did something like   document getElementById  optionID   select      If that doesn t work  maybe it ll get you closer to a solution  P

User · Answer

Why not add a variable for the element s Id and make it a reusable function   function SelectElement selectElementId  valueToSelect            var element   document getElementById selectElementId       element value   valueToSelect

User · Answer

shortest This is size improvement of William answer leaveCode value    14     x000D   x000D  leaveCode value    14   x000D   lt select id  leaveCode  name  leaveCode  gt     lt option value  10  gt Annual Leave lt  option gt     lt option value  11  gt Medical Leave lt  option gt     lt option value  14  gt Long Service lt  option gt     lt option value  17  gt Leave Without Pay lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

Should be something along these lines   function setValue inVal   var dl   document getElementById  leaveCode    var el  0  for  var i 0  i lt dl options length  i       if  dl options i  value    inVal       el i      break        dl selectedIndex   el

User · Answer

I compared the different methods   Comparison of the different ways on how to set a value of a select with JS or jQuery  code     function         var oldT   new Date   getTime         var element   document getElementById  myId        element value   4      console error new Date   getTime   - oldT        oldT   new Date   getTime            myId option   filter function             return   this  attr  value      4         attr  selected   true       console error new Date   getTime   - oldT        oldT   new Date   getTime            myId   val  4        console error new Date   getTime   - oldT         Output on a select with   4000 elements    1 ms   58 ms 612 ms   With Firefox 10  Note  The only reason I did this test  was because jQuery performed super poorly on our list with  2000 entries  they had longer texts between the options   We had roughly 2 s delay after a val    Note as well  I am setting value depending on the real value  not the text value

User · Answer

Not answering the question  but you can also select by index  where i is the index of the item you wish to select   var formObj   document getElementById  myForm    formObj leaveCode i  selected   true    You can also loop through the items to select by display value with a loop   for  var i   0  len  lt  formObj leaveCode length  i  lt  len  i         if  formObj leaveCode i  value     xxx   formObj leaveCode i  selected   true

User · Answer

function setSelectValue  id  val        document getElementById id  value   val    setSelectValue  leaveCode   14

User · Answer

Most of the code mentioned here didn t worked for me  At last  this worked window addEventListener is important  otherwise  your JS code will run before values are fetched in the Options     window addEventListener  quot load quot   function                     Selecting Element with ID - leaveCode                 var formObj   document getElementById  leaveCode                    Setting option as selected             let len              for  let i   0  len   formObj length  i  lt  len  i                     if  formObj i  value      lt value to show in Select gt                      formObj options i  selected   true                         Hope  this helps

User · Answer

If you are using jQuery you can also do this       leaveCode   val  14      This will select the  lt option gt  with the value of 14     With plain Javascript  this can also be achieved with two Document methods    With document querySelector  you can select an element based on a CSS selector   document querySelector   leaveCode   value    14   Using the more established approach with document getElementById    that will  as the name of the function implies  let you select an element based on its id   document getElementById  leaveCode   value    14     You can run the below code snipped to see these methods and the jQuery function in action    x000D   x000D  const jQueryFunction        gt    x000D     x000D        leaveCode   val  14     x000D     x000D    x000D   x000D  const querySelectorFunction        gt    x000D     x000D    document querySelector   leaveCode   value    14   x000D     x000D    x000D   x000D  const getElementByIdFunction        gt    x000D     x000D    document getElementById  leaveCode   value  14   x000D     x000D    x000D  input   x000D    display block  x000D    margin  10px  x000D    padding  10px x000D    x000D   lt select id  leaveCode  name  leaveCode  gt  x000D     lt option value  10  gt Annual Leave lt  option gt  x000D     lt option value  11  gt Medical Leave lt  option gt  x000D     lt option value  14  gt Long Service lt  option gt  x000D     lt option value  17  gt Leave Without Pay lt  option gt  x000D   lt  select gt  x000D   x000D   lt input type  button  value      leaveCode   val  14     onclick  jQueryFunction      gt  x000D   lt input type  button  value  document querySelector   leaveCode   value    14   onclick  querySelectorFunction      gt  x000D   lt input type  button  value  document getElementById  leaveCode   value    14   onclick  getElementByIdFunction      gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Not answering the question  but you can also select by index  where i is the index of the item you wish to select   var formObj   document getElementById  myForm    formObj leaveCode i  selected   true    You can also loop through the items to select by display value with a loop   for  var i   0  len  lt  formObj leaveCode length  i  lt  len  i         if  formObj leaveCode i  value     xxx   formObj leaveCode i  selected   true

User · Answer

Should be something along these lines   function setValue inVal   var dl   document getElementById  leaveCode    var el  0  for  var i 0  i lt dl options length  i       if  dl options i  value    inVal       el i      break        dl selectedIndex   el

User · Answer

I tried the above JavaScript jQuery-based solutions  such as        leaveCode   val  14      and  var leaveCode   document querySelector   leaveCode    leaveCode i  selected   true    in an AngularJS app  where there was a required  lt select gt  element   None of them works  because the AngularJS form validation is not fired  Although the right option was selected  and is displayed in the form   the input remained invalid  ng-pristine and ng-invalid classes still present    To force the AngularJS validation  call jQuery change   after selecting an option       leaveCode   val  14   change      and  var leaveCode   document querySelector   leaveCode    leaveCode i  selected   true    leaveCode  change

User · Answer

Not answering the question  but you can also select by index  where i is the index of the item you wish to select   var formObj   document getElementById  myForm    formObj leaveCode i  selected   true    You can also loop through the items to select by display value with a loop   for  var i   0  len  lt  formObj leaveCode length  i  lt  len  i         if  formObj leaveCode i  value     xxx   formObj leaveCode i  selected   true

User · Answer

document getElementById  leaveCode   value    10     That should set the selection to  Annual Leave

User · Answer

I tried the above JavaScript jQuery-based solutions  such as        leaveCode   val  14      and  var leaveCode   document querySelector   leaveCode    leaveCode i  selected   true    in an AngularJS app  where there was a required  lt select gt  element   None of them works  because the AngularJS form validation is not fired  Although the right option was selected  and is displayed in the form   the input remained invalid  ng-pristine and ng-invalid classes still present    To force the AngularJS validation  call jQuery change   after selecting an option       leaveCode   val  14   change      and  var leaveCode   document querySelector   leaveCode    leaveCode i  selected   true    leaveCode  change

User · Answer

Suppose your form is named form1   function selectValue val      var lc   document form1 leaveCode    for  i 0  i amp lt lc length  i            if  lc options i  value    val                lc selectedIndex   i          return

User · Answer

function setSelectValue  id  val        document getElementById id  value   val    setSelectValue  leaveCode   14

User · Answer

function setSelectValue  id  val        document getElementById id  value   val    setSelectValue  leaveCode   14

User · Answer

If using PHP you could try something like this    value    11    first        second        third        fourth        switch  value                case  10                     first    selected               break              case  11                     second    selected               break              case  14                     third    selected               break              case  17                     fourth    selected               break             echo   lt select id  leaveCode  name  leaveCode  gt     lt option value  10      first    gt Annual Leave lt  option gt     lt option value  11      second    gt Medical Leave lt  option gt     lt option value  14      third    gt Long Service lt  option gt     lt option value  17      fourth    gt Leave Without Pay lt  option gt   lt  select gt

User · Answer

If using PHP you could try something like this    value    11    first        second        third        fourth        switch  value                case  10                     first    selected               break              case  11                     second    selected               break              case  14                     third    selected               break              case  17                     fourth    selected               break             echo   lt select id  leaveCode  name  leaveCode  gt     lt option value  10      first    gt Annual Leave lt  option gt     lt option value  11      second    gt Medical Leave lt  option gt     lt option value  14      third    gt Long Service lt  option gt     lt option value  17      fourth    gt Leave Without Pay lt  option gt   lt  select gt

User · Answer

document getElementById  leaveCode   value    10     That should set the selection to  Annual Leave

User · Answer

Suppose your form is named form1   function selectValue val      var lc   document form1 leaveCode    for  i 0  i amp lt lc length  i            if  lc options i  value    val                lc selectedIndex   i          return

User · Answer

function foo value        var e   document getElementById  leaveCode        if e  e value   value

User · Answer

You most likely want this        statusDDL   val  2      OR     select   prop  selectedIndex   3

User · Answer

Should be something along these lines   function setValue inVal   var dl   document getElementById  leaveCode    var el  0  for  var i 0  i lt dl options length  i       if  dl options i  value    inVal       el i      break        dl selectedIndex   el

User · Answer

Should be something along these lines   function setValue inVal   var dl   document getElementById  leaveCode    var el  0  for  var i 0  i lt dl options length  i       if  dl options i  value    inVal       el i      break        dl selectedIndex   el

User · Answer

You most likely want this        statusDDL   val  2      OR     select   prop  selectedIndex   3

User · Answer

The easiest way if you need to  1  Click a button which defines select option 2  Go to another page  where select option is 3  Have that option value selected on another page  1  your button links  say  on home page    lt a onclick  location href  contact php option 1    style  cursor pointer   gt Sales lt  a gt   lt a onclick  location href  contact php option 2    style  cursor pointer   gt IT lt  a gt     where contact php is your page with select options  Note the page url has  option 1 or 2   2  put this code on your second page  my case contact php     lt   if  isset   GET  option     amp  amp    GET  option             pg     GET  option                      gt    3  make the option value selected  depending on the button clicked   lt select gt   lt option value  Sales   lt   if   pg     1     echo  selected       gt   gt Sales lt  option gt   lt option value  IT   lt   if   pg     2     echo  selected       gt   gt IT lt  option gt   lt  select gt       and so on  So this is an easy way of passing the value to another page  with select option list  through GET in url  No forms  no IDs   just 3 steps and it works perfect

User · Answer

shortest This is size improvement of William answer leaveCode value    14     x000D   x000D  leaveCode value    14   x000D   lt select id  leaveCode  name  leaveCode  gt     lt option value  10  gt Annual Leave lt  option gt     lt option value  11  gt Medical Leave lt  option gt     lt option value  14  gt Long Service lt  option gt     lt option value  17  gt Leave Without Pay lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

I m afraid I m unable to test this at the moment  but in the past  I believe I had to give each option tag an ID  and then I did something like   document getElementById  optionID   select      If that doesn t work  maybe it ll get you closer to a solution  P

User · Answer

Most of the code mentioned here didn t worked for me  At last  this worked window addEventListener is important  otherwise  your JS code will run before values are fetched in the Options     window addEventListener  quot load quot   function                     Selecting Element with ID - leaveCode                 var formObj   document getElementById  leaveCode                    Setting option as selected             let len              for  let i   0  len   formObj length  i  lt  len  i                     if  formObj i  value      lt value to show in Select gt                      formObj options i  selected   true                         Hope  this helps

User · Answer

The easiest way if you need to  1  Click a button which defines select option 2  Go to another page  where select option is 3  Have that option value selected on another page  1  your button links  say  on home page    lt a onclick  location href  contact php option 1    style  cursor pointer   gt Sales lt  a gt   lt a onclick  location href  contact php option 2    style  cursor pointer   gt IT lt  a gt     where contact php is your page with select options  Note the page url has  option 1 or 2   2  put this code on your second page  my case contact php     lt   if  isset   GET  option     amp  amp    GET  option             pg     GET  option                      gt    3  make the option value selected  depending on the button clicked   lt select gt   lt option value  Sales   lt   if   pg     1     echo  selected       gt   gt Sales lt  option gt   lt option value  IT   lt   if   pg     2     echo  selected       gt   gt IT lt  option gt   lt  select gt       and so on  So this is an easy way of passing the value to another page  with select option list  through GET in url  No forms  no IDs   just 3 steps and it works perfect

User · Answer

function foo value        var e   document getElementById  leaveCode        if e  e value   value

User · Answer

Not answering the question  but you can also select by index  where i is the index of the item you wish to select   var formObj   document getElementById  myForm    formObj leaveCode i  selected   true    You can also loop through the items to select by display value with a loop   for  var i   0  len  lt  formObj leaveCode length  i  lt  len  i         if  formObj leaveCode i  value     xxx   formObj leaveCode i  selected   true

User · Answer

Why not add a variable for the element s Id and make it a reusable function   function SelectElement selectElementId  valueToSelect            var element   document getElementById selectElementId       element value   valueToSelect

User · Answer

You can use this function   selectElement  leaveCode    11    function selectElement id  valueToSelect            let element   document getElementById id       element value   valueToSelect

User · Answer

function setSelectValue  id  val        document getElementById id  value   val    setSelectValue  leaveCode   14

User · Answer

I compared the different methods   Comparison of the different ways on how to set a value of a select with JS or jQuery  code     function         var oldT   new Date   getTime         var element   document getElementById  myId        element value   4      console error new Date   getTime   - oldT        oldT   new Date   getTime            myId option   filter function             return   this  attr  value      4         attr  selected   true       console error new Date   getTime   - oldT        oldT   new Date   getTime            myId   val  4        console error new Date   getTime   - oldT         Output on a select with   4000 elements    1 ms   58 ms 612 ms   With Firefox 10  Note  The only reason I did this test  was because jQuery performed super poorly on our list with  2000 entries  they had longer texts between the options   We had roughly 2 s delay after a val    Note as well  I am setting value depending on the real value  not the text value

User · Answer

document getElementById  leaveCode   value    10     That should set the selection to  Annual Leave

User · Answer

You can use this function   selectElement  leaveCode    11    function selectElement id  valueToSelect            let element   document getElementById id       element value   valueToSelect

User · Answer

You can use this function   selectElement  leaveCode    11    function selectElement id  valueToSelect            let element   document getElementById id       element value   valueToSelect

User · Answer

If you are using jQuery you can also do this       leaveCode   val  14      This will select the  lt option gt  with the value of 14     With plain Javascript  this can also be achieved with two Document methods    With document querySelector  you can select an element based on a CSS selector   document querySelector   leaveCode   value    14   Using the more established approach with document getElementById    that will  as the name of the function implies  let you select an element based on its id   document getElementById  leaveCode   value    14     You can run the below code snipped to see these methods and the jQuery function in action    x000D   x000D  const jQueryFunction        gt    x000D     x000D        leaveCode   val  14     x000D     x000D    x000D   x000D  const querySelectorFunction        gt    x000D     x000D    document querySelector   leaveCode   value    14   x000D     x000D    x000D   x000D  const getElementByIdFunction        gt    x000D     x000D    document getElementById  leaveCode   value  14   x000D     x000D    x000D  input   x000D    display block  x000D    margin  10px  x000D    padding  10px x000D    x000D   lt select id  leaveCode  name  leaveCode  gt  x000D     lt option value  10  gt Annual Leave lt  option gt  x000D     lt option value  11  gt Medical Leave lt  option gt  x000D     lt option value  14  gt Long Service lt  option gt  x000D     lt option value  17  gt Leave Without Pay lt  option gt  x000D   lt  select gt  x000D   x000D   lt input type  button  value      leaveCode   val  14     onclick  jQueryFunction      gt  x000D   lt input type  button  value  document querySelector   leaveCode   value    14   onclick  querySelectorFunction      gt  x000D   lt input type  button  value  document getElementById  leaveCode   value    14   onclick  getElementByIdFunction      gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I m afraid I m unable to test this at the moment  but in the past  I believe I had to give each option tag an ID  and then I did something like   document getElementById  optionID   select      If that doesn t work  maybe it ll get you closer to a solution  P

User · Answer

I m afraid I m unable to test this at the moment  but in the past  I believe I had to give each option tag an ID  and then I did something like   document getElementById  optionID   select      If that doesn t work  maybe it ll get you closer to a solution  P

User · Answer

You can use this function   selectElement  leaveCode    11    function selectElement id  valueToSelect            let element   document getElementById id       element value   valueToSelect

User · Answer

document getElementById  leaveCode   value    10     That should set the selection to  Annual Leave

[javascript] How do I programmatically set the value of a select box element using JavaScript?

Examples related to javascript

Examples related to html

Examples related to dom