To change the selected option in an HTML <select> element you have to change the value property on the <select> element or the selected property on the <option> element you want to select.
There are multiple ways you can do it and choosing one or another will depend on the information you have available.
Let’s see 6 different ways of changing the selected option using JavaScript:
1. Change Select Option by Value
To change the selected option programmatically by the value attribute, all we have to do is change the value property of the <select> element.
The select box will then update itself to reflect the state of this property. This is the most straightforward way of updating a select box state.
Let’s say that we want to select the option containing the attribute value="steve".
<select id="my-select">
<option value="ann">Ann Frank</option>
<option value="paul" selected>Paul Allen</option>
<option value="steve">Steve Jobs</option>
</select>
Code language: HTML, XML (xml)All we have to do is set the value of the select box to that same value:
const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
$select.value = 'steve'
};
Code language: JavaScript (javascript)2. Change Select Option by Text
We might also want to change the value of a select box by the text of the <option> element that gets displayed to visitors.
Doing this is probably the most complicated way, but still, something relatively simple to do. We have to iterate over the options and compare their text with the text of the element we want to select.
Once we find the element we want to update, we’ll be updating its selected property and setting it to true. This way, the select box will also update itself to reflect this change.
Note: this only works for select box elements that only admit a single value. If you are using a select box admiting multiple selected elements this will just add another option to the multi-select instead of changing the active one for another.
const changeSelected = (e) => {
const text = 'Steve Jobs';
const $select = document.querySelector('#mySelect');
const $options = Array.from($select.options);
const optionToSelect = $options.find(item => item.text ===text);
optionToSelect.selected = true;
};
Code language: JavaScript (javascript)There’s another way of doing this and that will solve the problem with multi-select inputs. Basically, once we find the element that has the text we are looking for, instead of just changing its selected property, we’ll be getting its value attribute and using it to set it as the only value for the whole select box.
const changeSelected = (e) => {
const text = 'Steve Jobs';
const $select = document.querySelector('#mySelect');
const $options = Array.from($select.options);
const optionToSelect = $options.find(item => item.text ===text);
// Here's the trick:
$select.value = optionToSelect.value;
};
Code language: JavaScript (javascript)3. Change Select Option by Option ID, CLASS, or attribute
This is quite simple too. This solution will also work for multi-select inputs by assigning a single value to them:
const changeSelected = (e) => {
const $select = document.querySelector('#mySelect');
const $option = $select.querySelector('#myId');
$select.value = $option.value;
};
Code language: JavaScript (javascript)And of course, it can be done in the same way if we have a class attribute instead of an id or any other attribute like data-selected="true". Just change the query to get the option element:
// Using id
const $option = $select.querySelector('#myId');
// Using classname
const $option = $select.querySelector('#mySelect .myId');
// Using data-attribute
const $option = $select.querySelector('#mySelect [data-selected="myElement"]');
Code language: JavaScript (javascript)4. Change Selected Option by its Index
If all we have is the index of the option element, we can set the selected attribute by retrieving the select box options. Then we only have to select the one we need from the array by its index.
Notice that the index is 0-based. So, the first <option> element will have index 0, the next 1, and so forth.
Knowing this, if we want to select the 3rd element, we’ll be using index 2 in our code to select it:
// Selecting the 3rd option (Demo 2)
document.querySelector('#mySelect').querySelector('option')[2].selected = 'selected'
Code language: JavaScript (javascript)Let’s see it working on a click event:
And rewritten to work for multi-select inputs:
// Selecting the 3rd option (Demo 2)
const $select = document.querySelector('#mySelect');
$select.value = $select.querySelector('option')[2].value;
Code language: JavaScript (javascript)Conclusion
Remember that, no matter what way you choose to use to replace and change the selected element on your <select> elements, you’d be better off updating the value property if you want a single element to be selected. Otherwise, when having select boxes admitting multiple elements you won’t replace the active element but just add another one.
Now you know how to set the value of a <select> element dynamically with JavaScript!
If you are learning JavaScript and this seems a bit difficult for you, there’s nothing to worry about! Eventually, you’ll get there. See how long does it take to learn JavaScript and what’s the best way to learn JavaScript!
