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:

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

Získame odkaz na select do premennej:

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

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