Numer wybranego elementu listy rozwijanej

W selektorach istnieje specjalna właściwość selectedIndex, przechowująca numer elementu listy, który jest obecnie wybrany. Numeracja rozpoczyna się od zera. Właściwość tę można zarówno odczytywać, jak i zapisywać, zmieniając wybrany element listy.

Przyjrzyjmy się pracy z tą właściwością na przykładzie. Załóżmy, że mamy następującą listę rozwijaną:

html<select id="select">
  <option value="one">jeden</option>
  <option value="two" selected>dwa</option>
  <option value="three">trzy</option>
</select>

Wyprowadźmy numer wybranego elementu listy:

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

A teraz wybierzmy jakiś inny element:

javascriptlet select = document.querySelector('#select');
select.selectedIndex = 2; // wybierze 'trzy'