Praca z listami rozwijanymi w JavaScript

W tej lekcji poznamy pracę z tagiem select, który reprezentuje listę rozwijaną. Jeśli nie umiesz pracować z tym tagiem w HTML, to najpierw zapoznaj się z jego budową w podręczniku pod tym linkiem: select.

Przyjrzyjmy się, jak pracować z tym tagiem przez JavaScript. Załóżmy, że mamy taką listę rozwijaną:

<select id="select">
	<option>one</option>
	<option selected>two</option>
	<option>three</option>
</select>

Pobierzmy referencję do selecta do zmiennej:

let select = document.querySelector('#select');

Teraz po zmianie selecta wypiszmy na ekran tekst wybranego punktu listy. Aby to zrobić, trzeba odczytać właściwość value naszego selecta:

select.addEventListener('change', function(){
	console.log(this.value);
});

Dany jest select, akapit i przycisk. Po kliknięciu na przycisk wypisz tekst wybranego punktu listy w akapit.

Zrób listę rozwijaną lat od 2020 do 2030. Przy wyborze jakiegoś punktu listy wypisz komunikat o tym, czy jest to rok przestępny czy nie.