Saya seorang teknisi yang terlibat dalam pengembangan front-end. Kotak drop-down adalah elemen halaman yang kami gunakan lebih banyak. Hari ini, saya akan berbicara tentang beberapa contoh acara pendaftaran kotak drop-down berdasarkan masalah yang dihadapi dalam pekerjaan yang sebenarnya. Saya harap ini akan membantu semua orang.
Salinan kode adalah sebagai berikut:
<Pilih name = "" id = "sel">
<Option value = "111"> 1 </tiption>
<Option value = "222"> 2 </pection>
<Opsi value = "333"> 3 </tiption>
</pilih>
Di atas adalah kode kotak drop-down pilihan tunggal yang sangat sederhana. Jika kami ingin mendapatkan nilai yang sesuai dengan mengklik opsi drop-down, kode umum adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var sel = document.getElementById ("sel");
var opsi = sel.Options;
untuk (var i = 0; i <option.length; i ++) {
opsi [i] .onClick = function () {
Peringatan (this.text); // Dapatkan nilai teks dari opsi drop-down
waspada (this.value); // Dapatkan nilai opsi drop-down
}
}
Kode di atas tidak dapat menghasilkan efek yang diharapkan di bawah IE9 dan Chrome, dan efektif pada Firefox. Dalam hal ini, tidak disarankan untuk mengikat acara klik pada opsi opsi. Dianjurkan untuk menggunakan peristiwa perubahan, karena perubahan bersifat umum dan pada dasarnya itu adalah perubahan.
Salinan kode adalah sebagai berikut:
var sel = document.getElementById ("sel");
sel.onchange = function () {
alert (sel.options [sel.selectectedIndex] .value);
}
Di atas adalah semua tentang artikel ini, saya harap Anda menyukainya.