How to Set the Value of a Select Element in JavaScript

Programmatically setting the selected option of a <select> (dropdown) element is a common task in web development. You might need to load a user's saved preference, update a form based on other selections, or reset a form to its default state.

This guide will teach you the modern and most direct way to set the value of a select element by using its value property.

The Core Method: Setting the value Property

The simplest and most reliable way to change the selected option of a <select> element is to set its value property. The browser will automatically find the <option> element whose value attribute matches the string you provide and make it the selected option.

Problem: you have a dropdown menu, and you need to programmatically select one of its options.

<select id="fruit-select">
  <option value="">--Please choose an option--</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Solution:

1. Get a reference to the <select> element.
2. Assign a string to its value property that matches the value attribute of the desired <option>.

// 1. Select the <select> element.
const fruitSelect = document.getElementById('fruit-select');

// 2. Set its value.
fruitSelect.value = 'banana';

// Now, the "Banana" option is selected in the UI.
console.log(fruitSelect.value); // Output: "banana"

How the .value Property Works

When you set the value of a <select> element, the browser performs the following steps:

1. It searches through all the child <option> elements.
2. It looks for the first <option> whose value attribute is an exact match for the string you provided.
3. If a match is found, that option's selected property is set to true, and it becomes the currently displayed option. All other options are deselected.
4. If no match is found, the selection is often cleared (set to the first option with an empty value or simply the first option, depending on the browser).

Clearing the Selection

To programmatically deselect all options and reset the dropdown (often to a placeholder like "--Please choose--"), you can set the value to an empty string ('').

Solution: this assumes you have a placeholder option with value="".

const fruitSelect = document.getElementById('fruit-select');

// Select "Banana"
fruitSelect.value = 'banana';

// Now, clear the selection
fruitSelect.value = '';

console.log(fruitSelect.value); // Output: ""
// The "--Please choose an option--" is now selected in the UI.

Common Pitfalls and How to Solve Them

Problem: The Value Does Not Exist

If you try to set the value of a <select> element to a value that does not correspond to any of its <option>s, the selection will be cleared.

Example of problem:

const fruitSelect = document.getElementById('fruit-select');

// There is no option with the value "grape".
fruitSelect.value = 'grape';

// The browser resets the selection.
console.log(fruitSelect.value); // Output: "" (or the value of the first option)

note

This does not throw an error, but it can lead to unexpected behavior.

Solution: Before setting the value, it's a good practice to ensure the value is valid. You can do this by checking against a predefined list or by querying the options themselves.

function setSelectedValue(selectElement, value) {
  const optionExists = [...selectElement.options].some(opt => opt.value === value);
  
  if (optionExists) {
    selectElement.value = value;
  } else {
    console.warn(`Value "${value}" does not exist in the select element.`);
    selectElement.value = ''; // Reset to default
  }
}

Practical Example: Setting a Dropdown from a User Preference Object

This is a very common use case. You load a user's saved settings and need to update the form to reflect their choices.

// A user's saved preferences, loaded from an API or localStorage
const userPreferences = {
  theme: 'dark',
  notifications: 'weekly'
};

// Get references to the form elements
const themeSelect = document.getElementById('theme-select');
const notificationSelect = document.getElementById('notification-select');

// Set the values of the select elements based on the loaded data
themeSelect.value = userPreferences.theme;
notificationSelect.value = userPreferences.notifications;

note

This instantly updates the UI to match the user's saved state.

Conclusion

Setting the value of a select element is a simple and direct operation in modern JavaScript.

• The recommended best practice is to set the .value property of the <select> element directly: mySelectElement.value = 'option-value';.
• The browser will automatically find and select the <option> with the matching value attribute.
• To clear the selection, set the value to an empty string: mySelectElement.value = '';.
• Be aware that setting a non-existent value will reset the selection without throwing an error.