Pudotusvalikoiden käsittely JavaScriptissä

Tässä oppitunnissa tutkimme select-tagin kanssa työskentelyä, joka edustaa pudotusvalikkoa. Jos et osaa työskennellä tämän tagin kanssa HTML:ssä, tutustu aluksi sen rakenteeseen hakuteoksessa tästä linkistä: select.

Katsotaan kuinka työskennellä tämän tagin kanssa JavaScriptin kautta. Oletetaan, että meillä on tällainen pudotusvalikko:

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

Haetaan viite select-elementtiin muuttujaan:

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

Tehdään nyt niin, että kun valikkoa muutetaan, tulostetaan valitun listakohdan teksti näytölle. Tätä varten on luettava valikon value-ominaisuus (property):

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