jQuery Tutorial - Chained Combobox

jQuery Tutorial - Chained Combobox
3 votes, 4.67 avg. rating (93% score)

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:

Jika Anda menyukai artikel ini silahkan tinggalkan komentar atau berlangganan RSS feed untuk mendapatkan update terbaru artikel dari kami.
jQuery Tutorial - Chained Combobox
3 votes, 4.67 avg. rating (93% score)

pino

Seorang yang hobby dalam menjelajahi dunia internet, gemar bermain dengan program PHP dan sejenisnya. Sekarang bekerja sebagai tenaga pengajar di salah satu SMK di Lamongan.

You may also like...

2 Responses

  1. audio haji says:

    ok keren, bisa langsung di coba ni gan

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

[+] kaskus emoticons nartzco