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

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

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

A teraz wybierzmy jakiś inny element:

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

Dane wejściowe i selektor. W pole wprowadzana jest jakaś liczba. Po utracie fokusu uczyń wybranym element listy, którego numer jest równy wartości z pola wejściowego.

Utwórz listę rozwijaną z nazwami dni tygodnia. Sprawdź, aby za pomocą JavaScript domyślnie wybierał w tej liście bieżący dzień.