How can I set the default value for an HTML <select> element with JavaScript?

Question

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.

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

Not A Robot · Accepted Answer · 2020-05-05 11:50:08Z

4

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>

answered May 5, 2020 at 11:50

Not A Robot

2,7002 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arghore · Accepted Answer · 2020-05-05 12:36:09Z

2

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

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

edited May 5, 2020 at 12:36

answered May 5, 2020 at 11:51

Arghore

411 gold badge1 silver badge4 bronze badges

4 Comments

Heretic Monkey Over a year ago

There's no need for all of that. If the select does not have the multiple attribute, you do not need to set any other option's selected property to false before setting another's to true. You also don't need to loop; just set the value of the select element to the value retrieved from the database, as noted in the answers to the question linked in the comment to the question.

Arghore Over a year ago

See, that first thing is definitely something you need to know (i edited it out, from my answer), i tried it and it works in my case :) ... i will check the code you linked to as well.

Arghore Over a year ago

Ok, i managed to make that code work, but i had to add ".." around my the database call to have it update in the html selector on screen correctly (otherwise it said the data from the database was 'undefined'; aka it treated it as some variable).

Arghore Over a year ago

@HereticMonkey tnx for your time and attention, i'd give a rep if i could? ... anyways, i included the answer you linked to with the note that i ran into myself.

gabibrk · Accepted Answer · 2020-05-05 11:49:34Z

0

use this

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

original

answered May 5, 2020 at 11:49

gabibrk

801 silver badge6 bronze badges

6 Comments

Heretic Monkey Over a year ago

Please don't answer duplicate questions. Instead, flag them as duplicates, giving the URL of the duplicate question (the "original" link in your answer).

Arghore Over a year ago

@HereticMonkey See, i can't add my answer to these questions, because i lack the reputation to do so, but i don't see my answer as one of the answers given... while for me the answer i provide (see my name in the list of answers) is the one i needed. So seeing stackoverflow doesn't let me provide the answer, the only way for me to help somebody else is to do it like this...

Heretic Monkey Over a year ago

@Arghore You can add your answer to the question I linked to. Anyone can; there is no lock on that question.

Arghore Over a year ago

@HereticMonkey --- I see: Highly active question. Earn 10 reputation in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity. ;) ... so i can't :(

Heretic Monkey Over a year ago

@Arghore Argh; sorry, this is part of a bunch of changes Stack Overflow has been making. I don't see that message because I have more rep, so I didn't think it was locked like that :(. That's annoying...

|

Collectives™ on Stack Overflow

How can I set the default value for an HTML <select> element with JavaScript?

3 Answers 3

Comments

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related