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:

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

Dapatkan rujukan kepada select dalam pembolehubah:

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

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

Diberikan satu select, satu perenggan dan satu butang. Apabila diklik pada butang, paparkan teks item senarai yang dipilih ke dalam perenggan.

Buat satu senarai jatuh turun tahun dari 2020 hingga 2030. Apabila memilih mana-mana item senarai, paparkan mesej sama ada tahun itu lompat atau tidak.