тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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