Работа со паѓачки листи во 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. При избор на некоја ставка од листата прикажете порака дали годината е престапна или не.