In the previous lesson, we learned how to get the selected list item. Let's now change the selected item using JavaScript.
To do this, in the property value
of the
select, we write the value of the value
attribute of the option
that we want
to select.
Suppose we have the following select:
<select id="select">
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
</select>
Let's also have a button:
<input type="submit" id="button">
Get references to the select and the button into variables:
let select = document.querySelector('#select');
let button = document.querySelector('#button');
And now let's make it so that when the button is clicked, our select changes the selection:
button.addEventListener('click', function() {
select.value = 'one';
});
If our list does not have value
attributes,
then we need to write the text of the option
tag that we want to select into the value
property of the select.
Make a dropdown list with the names of the months. Make JavaScript select the current month from this list by default.