Introduction

Changing the selected value of a select element with jQuery is usually as simple as calling .val(...) on the element. The two details that matter are whether the target option value actually exists and whether you also need to trigger the change event for other code to react.

In other words, changing the UI state and notifying the rest of the page are related but separate steps. A lot of bugs come from forgetting the second one.

The Normal Way: Use .val()

Suppose you have this drop-down list:

1<select id="statusSelect">
2  <option value="new">New</option>
3  <option value="in_progress">In Progress</option>
4  <option value="done">Done</option>
5</select>

To select In Progress, use the option value:

$("#statusSelect").val("in_progress");

That updates the selected option immediately. This is the standard jQuery answer because .val() is built for reading and writing form control values.

Trigger change If Other Logic Depends on It

Setting the value does not always run any change handlers that your application attached. If other code listens for change, trigger it explicitly.

$("#statusSelect").val("in_progress").trigger("change");

This is important for forms that update previews, run validation, or enable and disable other controls when the user changes the selection.

For example:

1$("#statusSelect").on("change", function () {
2  console.log("Selected:", $(this).val());
3});
4
5$("#statusSelect").val("done").trigger("change");

Without .trigger("change"), the select box would show Done, but the event handler would not necessarily run.

Make Sure the Value Exists

If you set a value that is not present in any option, the selection will usually become empty or remain unchanged depending on browser behavior.

$("#statusSelect").val("archived");
console.log($("#statusSelect").val());

A safer pattern is to check first:

1const select = $("#statusSelect");
2const targetValue = "done";
3
4if (select.find(`option[value='${targetValue}']`).length > 0) {
5  select.val(targetValue).trigger("change");
6}

That keeps the UI state predictable and avoids silently selecting nothing.

Selecting by Text Instead of Value

Sometimes you only know the displayed label, not the option value. In that case, locate the matching option and mark it selected.

1$("#statusSelect option").filter(function () {
2  return $(this).text() === "Done";
3}).prop("selected", true);
4
5$("#statusSelect").trigger("change");

This works, but selecting by value is usually better because values are stable while visible labels may change for localization or wording updates.

Handling Dynamic Options

If options are added asynchronously, set the value only after the options exist.

1const select = $("#statusSelect");
2
3select.append('<option value="blocked">Blocked</option>');
4select.val("blocked").trigger("change");

Trying to set the value before the option is inserted is a common reason the selection "doesn't work."

Multi-Select Elements Use the Same API

For a multi-select control, the pattern is the same, but .val() takes an array of option values.

$("#tagSelect").val(["bug", "urgent"]).trigger("change");

That is useful because many developers reach for manual loops even though jQuery already supports the common multi-select case directly.

Common Pitfalls

• Calling .val(...) and expecting attached change handlers to fire automatically.
• Setting a value that does not exist in the option list.
• Selecting by visible text when a stable option value was available.
• Trying to update the selection before dynamically loaded options have been inserted.
• Mixing raw DOM methods and jQuery code in ways that make event behavior inconsistent.

Summary

• Use $(selector).val(value) to change the selected option by value.
• Add .trigger("change") when other code needs to react to the update.
• Check that the option value exists before setting it.
• Prefer selecting by value rather than by display text.
• For dynamic lists, make sure the option is present before trying to select it.