How to set the 'selected' (default) value for an HTML <select> element with JavaScript. Aka. currently option0 is 'selected', how to run a script to change it to display the value i want?

this for example because that value is previously saved in a database, and i only want it updated if the user actually specifies to do so. But if i don't specify the value (by re-selecting the previous option), saving the 'edit' will overwrite the previous value with the 'default selected' value the <select> is loaded with.

<select id="selector" name="selector">
  <option id="option0" value="0" selected=true >default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>

NOTE: Because i lack reputation to add my answer (below) to the general thread on this topic, here the solution i got to using javascript, to set an option to be the option displayed/selected in the selector. This can also be a <%= value %> from a database.

How to set the 'selected' (default) value for an HTML <select> element with JavaScript. Aka. currently option0 is 'selected', how to run a script to change it to display the value i want?

this for example because that value is previously saved in a database, and i only want it updated if the user actually specifies to do so. But if i don't specify the value (by re-selecting the previous option), saving the 'edit' will overwrite the previous value with the 'default selected' value the <select> is loaded with.

<select id="selector" name="selector">
  <option id="option0" value="0" selected=true >default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>

NOTE: Because i lack reputation to add my answer (below) to the general thread on this topic, here the solution i got to using javascript, to set an option to be the option displayed/selected in the selector. This can also be a <%= value %> from a database.

• javascript
• html
• select
• selected

• Does this answer your question? How do I programmatically set the value of a select box element using JavaScript? – Heretic Monkey Commented May 5, 2020 at 11:50

3 Answers 3

Use value property to set new selected value using JavaScript

document.getElementById('selector').value="2";

<select id="selector" name="selector">
  <option id="option0" value="0" selected=true >default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>

<script> 
    let options = document.getElementsByTagName('option');

    for(i=0; i<options.length; i++){
        if (options[i].value === "<%= or_some_string %>"){
            options[i].selected = true;
        }
    } 
</script>

We get all the options (this is an html collection) and iterate over it to check if any option is equal to the "String" or "<%=string_value_from_database%>". And set it's .selected to true.

NOTE - MAYBE BETTER - DEFFO SHORTER: with help in the ments:

<script>
  let to_select = document.getElementById('selector');
  to_select.value = "<%= value %>";
</script>

Where to_select.value is either set to the value you want, or to a database value. Do note, you may or may not need the ".." around the value you set, depending on the setup of the <select> and how you stored your data.

use this

document.getElementById("selector").selectedIndex = 3;

original