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

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

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

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

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

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

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

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