Bekerja dengan Dropdown List di JavaScript

Dalam pelajaran ini, kita akan mempelajari cara bekerja dengan tag select, yang merupakan sebuah dropdown list. Jika Anda belum bisa bekerja dengan tag ini di HTML, pelajari dulu cara kerjanya di panduan melalui tautan ini: select.

Mari kita lihat bagaimana cara bekerja dengan tag ini melalui JavaScript. Misalkan kita memiliki dropdown list seperti berikut:

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

Dapatkan referensi ke select ke dalam variabel:

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

Sekarang, saat select berubah, mari tampilkan teks dari item yang dipilih ke layar. Untuk melakukan ini, kita perlu membaca properti value dari select kita:

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

Diberikan sebuah select, sebuah paragraf, dan sebuah tombol. Saat tombol diklik, tampilkan teks item yang dipilih dari list ke dalam paragraf.

Buatlah dropdown list untuk tahun dari 2020 hingga 2030. Saat sebuah item dipilih, tampilkan pesan apakah tahun tersebut adalah tahun kabisat atau bukan.