Delo z spustnimi seznami v JavaScript

V tej lekciji bomo preučili delo z oznako select, ki predstavlja spustni seznam. Če ne znate delati s to oznako v HTML, jo najprej preučite v priročniku po tej povezavi: select.

Poglejmo, kako delati s to oznako prek JavaScript. Naj imamo podan takšen spustni seznam:

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

Dobimo referenco na select v spremenljivko:

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

Zdaj pa ob spremembi selecta izpišimo na zaslon besedilo izbranega elementa seznama. Za to je treba prebrati lastnost value našega selecta:

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

Podan je select, odstavek in gumb. Ob kliku na gumb izpišite besedilo izbranega elementa seznama v odstavek.

Naredite spustni seznam let od 2020 do 2030. Pri izbiri katerega koli elementa seznama izpišite sporočilo, ali je prestopno to leto ali ne.