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:

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

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

javascriptlet 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:

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