Práca s rozbaľovacími zoznamami v JavaScript

V tejto lekcii budeme študovať prácu s tegom select, ktorý predstavuje rozbaľovací zoznam. Ak neviete pracovať s týmto tegom v HTML, najprv si preštudujte jeho štruktúru v príručke na tomto odkaze: select.

Pozrime sa, ako pracovať s týmto tegom cez JavaScript. Predpokladajme, že máme takýto rozbaľovací zoznam:

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

Získame odkaz na select do premennej:

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

Teraz po zmene selectu vypíšme text vybranej položky zoznamu. Na to je potrebné prečítať vlastnosť value nášho selectu:

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

Daný select, odstavec a tlačidlo. Po kliknutí na tlačidlo vypíšte text vybranej položky zoznamu do odseku.

Vytvorte rozbaľovací zoznam rokov od 2020 do 2030. Pri výbere akejkoľvek položky zoznamu zobrazte správu o tom, či je priestupný tento rok alebo nie.