Het nummer van het geselecteerde item in een dropdownlijst

In select elementen bestaat er een speciale eigenschap selectedIndex, die het nummer opslaat van het lijstitem dat momenteel is geselecteerd. De nummering begint hierbij vanaf nul. Deze eigenschap kan zowel worden uitgelezen als beschreven, om het geselecteerde lijstitem te veranderen.

Laten we de werking van deze eigenschap bekijken aan de hand van een voorbeeld. Stel we hebben de volgende dropdownlijst:

<select id="select">
	<option value="one">een</option>
	<option value="two" selected>twee</option>
	<option value="three">drie</option>
</select>

Laten we het nummer van het geselecteerde lijstitem uitvoeren:

let select = document.querySelector('#select');
console.log(select.selectedIndex); // geeft 1 weer

Laten we nu een ander item selecteren:

let select = document.querySelector('#select');
select.selectedIndex = 2; // selecteert 'drie'

Gegeven een invoerveld en een select. Er wordt een getal in het invoerveld ingevoerd. Maak het lijstitem geselecteerd bij het verlies van focus, waarvan het nummer gelijk is aan de waarde uit het invoerveld.

Maak een dropdownlijst met de namen van de dagen van de week. Zorg ervoor dat via JavaScript standaard de huidige dag in deze lijst wordt geselecteerd.