Introduction

If you want to select an option in an HTML select element by its value, the simplest solution is to assign to the value property of the select. The browser will find the matching option and update the selected state automatically. Most of the time, that is all you need.

The Normal Way: Assign select.value

Given this markup:

1<select id="fruit-select">
2  <option value="apple">Apple</option>
3  <option value="orange">Orange</option>
4  <option value="banana">Banana</option>
5</select>

You can select the banana option like this:

const select = document.getElementById("fruit-select");
select.value = "banana";

This is the cleanest approach because it uses the control as intended. You do not need to loop over options or set selected on individual nodes unless you have a special case.

When Setting value Does Not Change Anything

If no option has the requested value, the selection will not update to a valid matching choice. That means you should verify that the option exists when the value comes from external data.

1const select = document.getElementById("fruit-select");
2const wanted = "pear";
3
4select.value = wanted;
5
6if (select.value !== wanted) {
7  console.log("No option matched that value.");
8}

This check is useful when the options are loaded dynamically or when data may be out of sync with the current UI.

Select by Value in a Multi-Select Control

For a multi-select, select.value only gives you one value. If you want to select several options by value, loop through the options and update each one.

1<select id="tag-select" multiple>
2  <option value="js">JavaScript</option>
3  <option value="py">Python</option>
4  <option value="go">Go</option>
5</select>

1const select = document.getElementById("tag-select");
2const wantedValues = new Set(["js", "go"]);
3
4for (const option of select.options) {
5  option.selected = wantedValues.has(option.value);
6}

That is the right approach when the control is meant to hold multiple selected options at once.

Trigger Change Logic When Needed

Setting the selected value programmatically updates the control, but it does not always trigger the same behavior as a user action unless your code dispatches the event explicitly.

const select = document.getElementById("fruit-select");
select.value = "orange";
select.dispatchEvent(new Event("change", { bubbles: true }));

This matters when other parts of the UI listen for change and need to react immediately.

Querying the Option Directly

You can also find the matching option and set selected yourself, although this is more verbose than assigning select.value.

1const option = document.querySelector('#fruit-select option[value="banana"]');
2if (option) {
3  option.selected = true;
4}

This can be useful if you need to inspect or modify the option node itself, but it is not the best default for ordinary selection by value.

Dynamic Option Lists

If options are added after page load, assign the value only after the options exist.

1const select = document.getElementById("fruit-select");
2select.innerHTML = `
3  <option value="apple">Apple</option>
4  <option value="banana">Banana</option>
5`;
6
7select.value = "banana";

Trying to select a value before the options are present will silently fail to match.

Common Pitfalls

A common mistake is setting the selected attribute in HTML and expecting it to stay authoritative after JavaScript starts mutating the control. Once the page is running, use DOM properties instead of relying on the original markup.

Another mistake is forgetting that programmatic updates may not trigger downstream listeners unless you dispatch a change event.

It is also easy to confuse an option’s visible text with its value. The selection logic matches the value attribute, not the label shown to the user.

Summary

• The standard way to select an option by value is select.value = "...".
• Check whether the value actually matched an option when data may be unreliable.
• For multi-select controls, update option.selected for each option explicitly.
• Dispatch a change event if other code depends on change handlers running.
• Match against option value, not the visible display text.