Membuat dropdown berantai

Membuat dropdown berantai

3817
28
SHARE

Halo kawan..akhirnya ada waktu buat nulis juga.. hehe. Kali ini saya akan menulis sesuatu yang (mungkin) pernah menjadi pertanyaan bagi semua orang yang belajar pemrograman. Yaitu membuat select / dropdown berantai.

select berantai

Jadi misalnya di droddown pertama berisi nama provinsi, kemudian droddown kedua berisi kota dan droddown ketiga berisi kecamatan. Misalnya pengguna memilih provinsi Jawa Barat, maka kota yang muncul pada droddown kedua hanya kota yang ada di jawa barat. Demikian juga misalnya pengguna memilih kota Bandung, maka yang muncul pada droddown kecamatan hanya kecamatan yangΒ  ada di Bandung.

Membuat dropdown berantai

Biar tidak penasaran baiklah langsung saja kita mulai membuatnya.
Oia lupa, sebelum membuatnya anda memerlukan jquery-1.10.2.min.js dan jquery.chained.min.js (Copyright 2010-2013 Mika Tuupola) – anda dapat mendownloadnya di akhir artikel ini.

Step 1 : Buatlah database dan tabel provinsi, tabel kota dan tabel kecamatan. Kemudian isikan juga data dalam tabel-tabel tersebut. (anda dapat mendownload database di akhir artikel ini).

Step 2 : Buatlah file select.php dengan kode sbb :

Step 3 : Jalankan select.php melalui browser anda dengan mengetikan http://localhost/folderprojectanda/select.php. Bila tidak ada kesalahan akan muncul 3 dropdown seperti gambar di awal artikel ini. Cobalah untuk memilih provinsi, kota dan kecamatan.

Bagaimana mudah bukan. Biar tidak capek nulis ini silahkan di download source code melalui link di bawai ini.

DOWNLOAD

Anda dapat membuat select berantai hingga banyak level. Misalnya dari kecamatan nanti ada dropdown lagi RW, kemudian dropdown RT, nomor rumah dst.. hahaha. Jangan lupa komentarnya ya. Terima kasih telah mengunjungi harviacode.com

28 COMMENTS

  1. mas mau nanya itukan comboxbox bertingkat, jika diakhir combobox bertingkat dikombinasikan dengan textfield otomatis gimana ya?…

  2. Hai mimin Harviacode. Perkenalkan saya Kresna. Saya senang sekali mimin membagikan ilmu tentang php. Saya harap mimin dan timnya lebih sering sharing ilmu nya di blog ini. Saya menjadikan website ini sebagai salah satu pembelajaran saya khususnya framework CodeIgniter.

    • hallo mas Kresna.. terima kasih sebelumnya. dan mohon maaf ini jarang update artikel karena saya bekerja sendiri dan saat ini lagi banyak urusan.. terima kasih. πŸ™‚

    • wah.. harus menyesuaikan koding worpressnya dan itu tidak mudah gan karena banyak yang harus diubah. Saran saya mending pakai plugin yang khusus buat WP aja, biasanya ada.

  3. cara edit / update data dari dropdown berantai gimana cara nya sih biar dropdown nya masih berantai seperti input awal.. tq..

    • lah kok bisa hahaha… coba di cek kembali querynya mas.. cek jg id / class select nya. pastikan sesuai dengan yang ada di javascriptnya.

    • bisa banget mas. contohnya ada di jualbelijasa.com/daftar.html. disana saya gunakan untuk nama provinsi, kota, kecamatan dan kelurahan. caranya sebenarnya tidak jauh beda dengan cara di atas, karena kebanyakan hanya bermain di javascriptnya. nanti kalo sempat saya buatkan versi CI nya mas. terima kasih

  4. nice bruh, btw ane bingung gan, kan ane buat chain dropdown, tapi itu dropdown ane buat dinamis juga, jadi bisa ditambah gitu dropdown/combobox nyaa, nah kalau yang dropdown/combobox yang pertama mau jalan ni chained combobox nya, tapi pas ane tambah combobox baru, nah gajalan chained nya di combobox yang baru, itu kenapa ya gan ?

    Terima Kasih gan, Sukses terus

  5. Gan mau tanya,kalau agar yang tersimpan di data base itu valuenya bukan “id_provinsi” atau “id_ kota” bagaimana gan? agar yang kesimpan valuenya nama provinsi dan nama kotanya.

  6. halo gan…terimasih atas tutorialnya, setelah saya cb dengan SQL Asli (Prov, Kab, Kec) untuk load data Indonesia ternyata berat bgt.
    ada solusi nga y untuk ini ? karena secara konsep ini yg sy cari. terima kasih

  7. halo mas..kalo ini ditambahkan dengan ajax (agar load ringan kalo data banyak) dan mengunakan chosen gimana ya ? terma kasih

LEAVE A REPLY