Работа с выпадающими списками в 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. При выборе какого-нибудь пункта списка выведите сообщение о том, високосный этот год или нет.

Атрибут value

Как правило, пунктам списка добавляют атрибут value. В этом случае свойство value селекта будет содержать не текст option, а значение его атрибута value.

Давайте переделаем наш селект:

<select id="select">
	<option value="1">one</option>
	<option value="2" selected>two</option>
	<option value="3">three</option>
</select>

Проверим, чему теперь равно выбранное значение:

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

Сделайте выпадающий список с названиями дней недели. В качестве атрибутов value пунктов списка добавьте номера дней недели от 1 до 7. По изменению списка выведите на экран сообщение о том, выбран выходной день или рабочий.