In selects, there is a special property selectedIndex
that stores the number of the list item that is currently
selected. The numbering starts from zero. At the same time,
this property can be both read and written by changing
the selected list item.
Let's see how this property works with an example. Let's say we have the following dropdown list:
<select id="select">
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
</select>
Let's display the number of the selected list item:
let select = document.querySelector('#select');
console.log(select.selectedIndex); // shows 1
Now let's choose some other item:
let select = document.querySelector('#select');
select.selectedIndex = 2; // shows 'three'
Given input and select. A number is entered into the input. When focus is lost, select the list item whose number is equal to the value from the input.
Make a dropdown list with the names of the days of the week. Make JavaScript select by default the current day from this list.