Hallo teman – teman berjumpa lagi dalam artikel DumetSchool pada kesempatan kali ini saya akan membahas tentang Cara Menggunakan Event onChange pada Select. Event onChange adalah event yang dijalankan ketika sebuah element (dalam hal ini adalah element select, text dan textarea) telah diubah nilainya sebelum element tersebut kehilangan focusnya. Event onChange ini sering digunakan pada element HTML select, text dan textarea.
Namun pada kesempatan kali ini saya akan membahas event onChange dengan study case nya adalah even pada select option, dimana nantinya saya membuat menu dropdown select sebuah provinsi. Jadi ketika saya klik misalkan jakarta nanti akan muncul sebuah value nama – nama kota di jakarta seperti jakarta timur dan jakarta barat. Kurang lebih hasilnya akan seperti di bawah ini :
Oke untuk lebih jelasnya langsung saja kita praktikkan sekarang, seperti biasa persiapkan terlebih dahulu text-editornya, kalau sudah silahkan ikuti langkah – langkah di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <title> Event onChange </title> </head> <body> <form> <select name="provinsi" onChange="tampil(this.value)"> <option value=""></option> <option value="Jakarta">Jakarta</option> <option value="Jateng">Jawa Tengah</option> </select> </form> <div id="kota"></div> <script type="text/javascript"> function tampil(provinsi) { var kota=""; switch(provinsi) { case "Jakarta" : { kota = "<ul><li>Jakarta Timur</li><li>Jakarta Barat</li></ul>"; } break; case "Jateng" : { kota = "<ul><li> Kebumen </li><li> purworejo </li></ul>"; } break; default :kota =""; } document.getElementById('kota').innerHTML =kota; } </script> </body> </html> |
Oke dari script di atas saya membuat sebuah dropdown dengan buah menu privinsi. Switch case merupakan percabangan yang digunakan ketika memiliki banyak dan banyak pernyataan. Oke untuk lebih jelasnya silahkan lihat demo nya.