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:

html<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:

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

Laten we nu een ander item selecteren:

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