JavaScriptда выпадающий рўйхатлар билан ишлаш

Ушбу дарсда биз теги select билан ишлашни ўрганамиз, у выпадающий рўйхатни ифодалайди. Агар сиз HTMLда ушбу тег билан ишлашни билмасангиз, аввал унинг тузилишини ушбу ҳавола буйича қўлланмада ўрганинг: select.

Келинг, ушбу тег билан JavaScript орқали қандай ишлашни кўрамиз. Бизда мана шундай выпадающий рўйхат берилган бўлсин:

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

Селектга ҳаволани ўзгарувчига оламиз:

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

Энди селект ўзгарганида рўйхатнинг танланган банди матнини экранга чиқарайлик. Бунги учун бизнинг селектимизнинг value хусусиятини ўқишимиз керак:

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

Селект, абзац ва тугма берилган. Тугма босилганда рўйхатнинг танланган банди матнини абзацга чиқаринг.

2020 йилдан 2030 йилгача бўлган йилларнинг выпадающий рўйхатини ясанг. Рўйхатнинг қандайдир банди танланганда, у йил кабиса йили ёки йўқлиги ҳақида хабар чиқаринг.