Pengendalian Senarai Jatuh Turun dalam JavaScript

Dalam pelajaran ini, kita akan mengkaji pengendalian tag select, yang mewakili senarai jatuh turun. Jika anda tidak tahu cara mengendalikan tag ini dalam HTML, mula-mula pelajari strukturnya dalam panduan di pautan ini: select.

Mari kita lihat bagaimana untuk mengendalikan tag ini melalui JavaScript. Katakan kita mempunyai senarai jatuh turun seperti berikut:

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

Dapatkan rujukan kepada select dalam pembolehubah:

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

Sekarang mari kita paparkan teks item yang dipilih pada skrin apabila select berubah. Untuk melakukan ini, kita perlu membaca sifat value select kita:

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