JavaScript'te Açılır Listelerle Çalışma

Bu derste, bir açılır liste temsil eden select etiketiyle çalışmayı öğreneceğiz. Bu etiketle HTML'de nasıl çalışılacağını bilmiyorsanız, önce yapısını şu bağlantıdaki referanstan inceleyin: select.

Şimdi bu etiketle JavaScript üzerinden nasıl çalışılacağına bakalım. Bize şöyle bir açılır liste verilmiş olsun:

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

Select öğesine bir referansı değişkene alalım:

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

Şimdi select değiştiğinde, listede seçilen öğenin metnini ekrana yazdıralım. Bunun için select'imizin value özelliğini okumamız gerekir:

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

Bir select, bir paragraf ve bir buton verilsin. Butona tıklandığında, listeden seçilen öğenin metnini paragrafa yazdırın.

2020'den 2030'a kadar bir yıl açılır listesi yapın. Listeden herhangi bir öğe seçildiğinde, bu yılın artık yıl olup olmadığını belirten bir mesaj yazdırın.