Работа с падащи списъци в 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);
});