Darbas su išskleidžiamaisiais sąrašais JavaScript

Šioje pamokoje mes išnagrinėsime darbą su tagu select, kuris yra išskleidžiamasis sąrašas. Jei nemokate dirbti su šiuo tagu HTML, pirmiausia išstudijuokite jo struktūrą žinyno pagal šią nuorodą: select.

Pažiūrėkime, kaip dirbti su šiuo tagu per JavaScript. Tarkime, kad turime tokį išskleidžiamąjį sąrašą:

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

Gaukime nuorodą į select elementą į kintamąjį:

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

Dabar, pasikeitus select reikšmei, išveskime ekrane pasirinkto sąrašo punkto tekstą. Tam reikia nuskaityti value savybę mūsų select elemento:

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

Duotas select elementas, pastraipa ir mygtukas. Paspaudus mygtuką atvaizduokite pasirinkto sąrašo punkto tekstą pastraipoje.

Sukurkite metų išskleidžiamąjį sąrašą nuo 2020 iki 2030. Pasirinkus bet kurį sąrašo punktą, išveskite pranešimą, ar tai keliamieji metai, ar ne.