Legördülő listák kezelése JavaScriptben

Ebben a leckében megismerkedünk a select taggel, amely egy legördülő listát jelent. Ha nem tudod, hogyan kell ezt a taget használni HTML-ben, akkor először tanulmányozd a szerkezetét a referenciában ezen a linken: select.

Nézzük meg, hogyan kell ezzel a taggel dolgozni JavaScripten keresztül. Tegyük fel, hogy van egy ilyen legördülő listánk:

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

Kapjunk hivatkozást a select-re egy változóba:

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

Most pedig a lista megváltozásakor írjuk ki a kiválasztott elem szövegét. Ehhez olvassuk ki a value tulajdonságot a selectünkön:

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