How to set an option value with vanilla JavaScript?

I select a <select></select> element this way:

const branch = document.querySelector("#x");

It appears from the DOM that this select list has options with each option being valued, say:

<option value="5">Some_textual_description</option>

How could I set option with the value 5 as the selected option for this select list?


While writing the question I have found this to work:

branch.value = 5; // The correct textual data appeared setted;

I don’t understand how that would work.
If you are trying to change the value of the option, you need to specify which option:

 const branch = document.querySelector("#x");
 branch.options[2].value = 2;

this would change the value of the 3rd option starting from zero

If you are trying to change the value, you are correct. bendqh1 is trying to select the option by value though, not change it’s value.

Changing the value of the select box (not the option), will select an option with a matching value, or if the option has no value the matching text content of the option.

<label for='selectBox'>Choose an option:</label>
<select name='selectBox' id='selectBox'>
  <option value='a'>option 1</option> <- 'a' 
  <option value=''>option 2</option> <- '' empty string
  <option value='b'>option 3</option> <- 'b'
  <option>option 4</option> <- 'option 4' text content
</select>

1 Like

The preferred way to do that is to gain a reference to the option itself, and set the selected property to be true.

Here’s an example using buttons to select each option.

<select id="x">
  <option value="">Please select</option>
  <option value="some-value">option 1</option>
  <option value="another-value">option 2</option>
  <option value="something-else">option 3</option>
  <option value="yet-another">option 4</option>
  <option value="and-another">option 5</option>
</select>
<p>
  <button class="select" data-index="1">Select 1</button>
  <button class="select" data-index="2">Select 2</button>
  <button class="select" data-index="3">Select 3</button>
  <button class="select" data-index="4">Select 4</button>
  <button class="select" data-index="5">Select 5</button>
</p>

The following JavaScript adds an event handler to each button, where it gets the data-index value and uses that to select the appropriate option.

function selectOption(select, index) {
    select.options[index].selected = true;
}
const buttons = document.querySelectorAll("button.select");
buttons.forEach(function (button) {
  document.body.addEventListener("click", function (evt) {
    const branch = document.querySelector("#x");
    const index = Number(evt.target.dataset.index);
    selectOption(branch, index);
  });
});

It’s also possible to do that using just one event handler, where it sits at a parent location, such as at the document body element.

But, as all clicks on the page will be going to that event handler, you do want to have a sanity filter, so that only suitable clicks end up being used.

function selectOption(select, index) {
    select.options[index].selected = true;
}
document.body.addEventListener("click", function (evt) {
  const target = evt.target;
  if (target.classList.contains("select")) {
    const branch = document.querySelector("#x");
    const index = Number(evt.target.dataset.index);
    selectOption(branch, index);
  }
});
2 Likes

I may well have taken it down the button route. That was only for illustration purposes to demonstrate how the selectbox value worked.

I’m not sure what bendqh1 was trying to achieve, maybe just experimenting :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.