Работа с падащи списъци в 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. При избор на който и да е елемент от списъка изведете съобщение дали тази година е високосна или не.