Ripmenüüde töötamine JavaScriptis

Selles õppetükis uurime tööd sildiga select, mis esindab ripmenüüd. Kui te ei oska selle sildiga töötada HTML-is, siis alustuseks uurige selle seadistust siin lingil olevas juhendis: select.

Vaatame, kuidas selle sildiga töötada läbi JavaScripti. Oletame, et meil on antud selline ripmenüü:

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

Saame viite select elemendile muutujasse:

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

Nüüd kuvame ekraanile valitud loendielemendi teksti select elemendi muutumisel. Selleks tuleb lugeda meie select elemendi value omadust:

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

Antud on select element, lõik ja nupp. Nupu vajutamisel kuvage valitud loendielemendi tekst lõigus.

Looge aastate ripmenüü alates 2020 kuni 2030. Mõne punkti valimisel kuvage teade, kas see on liigaasta või mitte.