Работа с выпадающими списками в JavaScript

В данном уроке мы с вами изучим работу с тегом select, представляющим собой выпадающий список. Если вы не умете работать с этим тегом на HTML, то для начала изучите его устройство в справочнике по этой ссылке: select.

Давайте посмотрим, как работать с этим тегом через JavaScript. Пусть у нас дан вот такой выпадающий список:

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

Получим ссылку на селект в переменную:

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

Давайте теперь при изменении селекта выведем на экран текст выбранного пункта списка. Для этого нужно прочитать свойство value нашего селекта:

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

Дан селект, абзац и кнопка. По клику на кнопку выведите текст выбранного пункта списка в абзац.

Сделайте выпадающий список годов от 2020 до 2030. При выборе какого-нибудь пункта списка выведите сообщение о том, високосный этот год или нет.