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:

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

Haetaan viite select-elementtiin muuttujaan:

let 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):

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

Annettu pudotusvalikko, kappale ja painike. Painiketta napsautettaessa tulosta valitun listakohdan teksti kappaleeseen.

Tee pudotusvalikko vuosille välillä 2020 - 2030. Kun jokin listan kohta valitaan, tulosta viesti siitä, onko kyseinen vuosi karkausvuosi vai ei.