 |
| Membuat Dynamic Combo Box Dengan Jquery, Select dan Pilih Multiple |
Pertanyaan tentang bagaimana ya caranya ketika kita pilih option A maka pada kotak pilihan yang kedua akan keluar option 1,2,3. Lalu saat kita pilih option B maka pada kotak pilihan kedua akan keluar option 4,5,6.
Jawabannya berbagai macam cara dapat dilakukan mulai dengan menggunkan database hingga array pada jquery. Pada postingan kali kita menggunakan jquery untuk mempercepat proses antar select box dan dapat juga disimpan ke database.
Logika untuk programnya sebagai berikut :
- Membuat dua buah combo box / select / pilihan. Pada postingan ini diterapkan dalam kasus fakultas dan program studi. Tidak lupa memasangkan id pada setiap combo box.
- Lalu menambahkan button simpan dan juga lengkap dengan id nya.
- Saat combo box terpilih maka pada javascript akan memanggil option untuk combo box yang kedua sesuai dengan value dari combox pertama dengan beberapa penambahan logika if else.
- Setelah combo box kedua juga sudah terselect lalu lanjut dengan klik button simpan atau submit untuk menyimpan data atau menampilkannya.
- Jika ingin menyimpan datanya dapat menggunakan ajax, namun di postingan ini hanya menampilkan data dan untuk trik menyimpan dengan ajax, silahkan hubungi admin pada contact, agar di buatkan postingan simpan data dengan ajaxnya.
Setelah memahami logika diatas, selanjutnya menerapkan pada script.
Dimulai dengan dua buah combo box atau select dan juga button submit. Berikut scriptnya :
Lalu javascript untuk pemilihan data pertama yang akan efek ke pemilihan data kedua lengkap dengan logika if else. Berikut scriptnya :
Penambahan javascript untuk button simpan atau submit. Pada hal ini tanpa ajax, jadi hanya menampilkan html nya. Berikut scriptnya :
Semoga bermanfaat bagi rekan rekan programmer website, jika ada kendala dalam penerapam script silahkan hubungi admin pada halaman contact di bawah halaman ini.
Postingan ini juga dilengkapi dengan video sebagai demo program yang telah dibangun. Berikut video nya :
0 Comments
