jQuery

jQuery Tutorial – Chained Combobox

jQuery Chained Combobox
Written by Fatoni

jQuery Tutorial – Chained Combobox. Tutorial kali ini saya akan membuat Chained Combobox dengan jQuery, sebagian dari anda mungkin tidak tahu apa itu chained combobox? seperti namanya chained dan combobox, berarti artinya combobox yang terhubung satu dengan yang lain. Ya, terhubung. Misalnya Anda memilih pilihan Buah pada combobox yang pertama, maka combobox yang kedua akan tampil jeruk, apel, nanas, semangka dan lanya.

Sudah paham kan apa itu chained combobox, oke jika sudah paham maka akan dilanjutnya dengan membuat tutorial yang sangat sederhana ini.

Nantinya akan dibuat 2 (dua) file PHP yaitu index.php dan select-request.php.

Sekarang buat file index.php dan ketikkan kode di bawah ini:

Dari kode di atas akan ada sebuah satu combobox yang tampil dengan pilihan Acura, BMW, Lexus, ‘Toyota, Honda yang dibuat pada baris ke-11.

Lah kok cuma 1 combobox, kode di atas kan ada dua combobox dan satu tombol submit? iza, combobox yang kedua akan muncul jika combobox pertama sudah dipilih, dan tombol submit akan tampil jika combobox yang kedua dipilih.

Lihat pada baris kode ke-33 dan 35-37. Penjelasan kode bisa dilihat pada kode diatas.

Selanjutnya buat file select-request.php dan ketikkan kode di bawah ini:

Lihat pada baris ke 5-9, kode tersebuat adalah membuat list/dropdown untuk combobox kedua berdasarkan nilai yang dipilih pada combobox yang pertama.

Misalkan combobox yang pertama dipilih Toyota maka coombobox yang kedua akan tampil Venza, Camry, Corolla, Echo.

Penjelasan kode sudah saya masukkan di atas.

Nah, sudah selesai. Chained Combobox ini masih bersifat statis atau ditulis secara manual.

Dalam tutorial berikutnya akan saya jelaskan bagaimana membuat chained combobox yang mengambil data dari database MySQL.

Oke, sekian dulu. Kalau ingin lihat hasilnya bisa klik tombol demo di bawah ini:

About the author

Fatoni

Programming is my hobby, not my job.

4 Comments

Leave a Comment