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:

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

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

javascriptlet 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:

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

Задание 1

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

Задание 2

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.