Introduction

In jQuery, the normal way to select a particular option is to set the value of the select element with .val(...). That is usually better than toggling selected manually because it expresses intent clearly and aligns with how forms are normally modeled: the value is the stable identifier, while the visible label is just display text.

Basic HTML Setup

1<select id="mySelect">
2  <option value="option1">Option 1</option>
3  <option value="option2">Option 2</option>
4  <option value="option3">Option 3</option>
5</select>

Each option has:

• a visible label
• a value attribute

In most real applications, the value is what you should target from JavaScript.

Select by Value

This is the standard jQuery solution:

$("#mySelect").val("option2");

That updates the selected option to the one whose value is "option2".

If you also want any change handlers to run, trigger the event explicitly:

$("#mySelect").val("option2").trigger("change");

This distinction matters because setting the value programmatically does not always fire the same event flow as a user interaction.

Select by Index

If you know the zero-based position of the option, you can select by index:

$("#mySelect option").eq(1).prop("selected", true);

This selects the second option. However, selecting by index is more fragile than selecting by value, because the order of options can change while their values remain stable.

Select by Visible Text

Sometimes the value is unknown but the displayed text is known. In that case:

$("#mySelect option").filter(function () {
  return $(this).text() === "Option 2";
}).prop("selected", true);

If your code depends on visible text, be careful with localization and whitespace, because UI text is more likely to change than machine-facing values.

Multi-Select Elements

For a select with the multiple attribute, .val() accepts an array:

1<select id="myMultiSelect" multiple>
2  <option value="red">Red</option>
3  <option value="green">Green</option>
4  <option value="blue">Blue</option>
5</select>

$("#myMultiSelect").val(["red", "blue"]).trigger("change");

That selects both matching options.

Reading the Selected Value

To confirm what is currently selected:

const selected = $("#mySelect").val();
console.log(selected);

For a single-select element, you get one value. For a multi-select element, you typically get an array of values.

Dynamic Options

If options are loaded asynchronously, set the selected value only after the options exist:

1const select = $("#mySelect");
2
3select.empty();
4select.append('<option value="option1">Option 1</option>');
5select.append('<option value="option2">Option 2</option>');
6
7select.val("option2").trigger("change");

If you try to set the value before the matching option is in the DOM, the selection will not stick.

Prefer .val() Over Toggling selected Manually

You will sometimes see manual code such as:

$("#mySelect option[value='option2']").prop("selected", true);

This works, but .val("option2") is usually simpler because it operates at the select level rather than micromanaging the child option directly.

Manual selected toggling is more useful when you need custom filtering logic or want to manipulate individual options in a multi-select case.

Native DOM Equivalent

If you ever move the same logic out of jQuery, the native DOM version is conceptually the same: assign to select.value and dispatch a change event only if your code expects that event flow.

Common Pitfalls

The biggest mistake is setting the selected option without matching the underlying value. Developers often target the visible text while the application logic actually relies on option values.

Another common issue is forgetting to trigger change when other code listens for it. The UI updates visually, but dependent code does not run, which makes the selection appear "not to work."

Finally, watch out for timing problems with dynamically populated selects. If the options are injected after an AJAX call, set the value after the list has been rendered.

Summary

• The standard jQuery solution is $("#mySelect").val("desiredValue").
• Use .trigger("change") if your code depends on change handlers firing.
• Selecting by value is usually safer than selecting by index or text.
• For multi-select elements, pass an array to .val(...).
• If options are loaded dynamically, apply the selection only after the options exist.