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

If you are using jQuery you can also do this:

$('#leaveCode').val('14');

This will select the <option> 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_

const jQueryFunction = () => {_x000D_
  _x000D_
  $('#leaveCode').val('14'); _x000D_
  _x000D_
}_x000D_
_x000D_
const querySelectorFunction = () => {_x000D_
  _x000D_
  document.querySelector('#leaveCode').value = '14' _x000D_
  _x000D_
}_x000D_
_x000D_
const getElementByIdFunction = () => {_x000D_
  _x000D_
  document.getElementById('leaveCode').value='14' _x000D_
  _x000D_
}

_x000D_

input {_x000D_
  display:block;_x000D_
  margin: 10px;_x000D_
  padding: 10px_x000D_
}

_x000D_

<select id="leaveCode" name="leaveCode">_x000D_
  <option value="10">Annual Leave</option>_x000D_
  <option value="11">Medical Leave</option>_x000D_
  <option value="14">Long Service</option>_x000D_
  <option value="17">Leave Without Pay</option>_x000D_
</select>_x000D_
_x000D_
<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />_x000D_
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />_x000D_
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_x000D_

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 foo value        var e   document getElementById  leaveCode        if e  e value   value

User · Answer

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

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

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

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

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

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

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

User · Answer

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

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 most likely want this        statusDDL   val  2      OR     select   prop  selectedIndex   3

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

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

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 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

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

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

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

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

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

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

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

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

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

If you are using jQuery you can also do this:

$('#leaveCode').val('14');

This will select the <option> 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_

const jQueryFunction = () => {_x000D_
  _x000D_
  $('#leaveCode').val('14'); _x000D_
  _x000D_
}_x000D_
_x000D_
const querySelectorFunction = () => {_x000D_
  _x000D_
  document.querySelector('#leaveCode').value = '14' _x000D_
  _x000D_
}_x000D_
_x000D_
const getElementByIdFunction = () => {_x000D_
  _x000D_
  document.getElementById('leaveCode').value='14' _x000D_
  _x000D_
}

_x000D_

input {_x000D_
  display:block;_x000D_
  margin: 10px;_x000D_
  padding: 10px_x000D_
}

_x000D_

<select id="leaveCode" name="leaveCode">_x000D_
  <option value="10">Annual Leave</option>_x000D_
  <option value="11">Medical Leave</option>_x000D_
  <option value="14">Long Service</option>_x000D_
  <option value="17">Leave Without Pay</option>_x000D_
</select>_x000D_
_x000D_
<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />_x000D_
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />_x000D_
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_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

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

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

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

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

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

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

User · Answer

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

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

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

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

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

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

[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