Práce s rozbalovacími seznamy v JavaScriptu

V této lekci prozkoumáme práci s tagem select, který představuje rozbalovací seznam. Pokud neumíte pracovat s tímto tagem v HTML, nejprve si prostudujte jeho strukturu v referenci na tomto odkazu: select.

Podívejme se, jak s tímto tagem pracovat pomocí JavaScriptu. Předpokládejme, že máme daný takovýto rozbalovací seznam:

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

Získáme odkaz na select do proměnné:

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

Nyní při změně selectu vypišme text vybrané položky seznamu. K tomu je třeba přečíst vlastnost value našeho selectu:

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

Je dán select, odstavec a tlačítko. Po kliknutí na tlačítko vypište text vybrané položky seznamu do odstavce.

Vytvořte rozbalovací seznam roků od 2020 do 2030. Při výběru libovolné položky seznamu vypište zprávu o tom, zda je tento rok přestupný nebo ne.