JavaScript-da ochiladigan ro'yxatlar bilan ishlash

Ushbu darsda biz select tegi bilan ishlashni o'rganamiz, bu ochiladigan ro'yxatni ifodalaydi. Agar siz ushbu tegn bilan HTML-da ishlay olmasangiz, avval uning tuzilishini quyidagi havoladagi qo'llanmada o'rganing: select.

Keling, ushbu tegn bilan JavaScript orqali qanday ishlashni ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi ochiladigan ro'yxat mavjud:

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

Keling, select ga o'zgaruvchiga havola olamiz:

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

Keling, endi select o'zgarganda ro'yxatning tanlangan bandining matnini ekranda chiqaramiz. Buning uchun biz select ning value xususiyatini o'qishimiz kerak:

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

Select, abzas va tugma berilgan. Tugmacha bosilganda ro'yxatning tanlangan bandi matnini abzaga chiqaring.

2020 yildan 2030 yilgacha bo'lgan yillar ochiladigan ro'yxatini yarating. Qandaydir band tanlanganda, bu yil kabisa yili yoki yo'qligi haqida xabarni chiqaring.