Chain Selected atau biasa disebut dropdown berantai biasanya sering digunakan untuk validasi input agar data yang disimpan konsisten berdasarkan pilihan sebelumnya.
Chain selected banyak digunakan misalnya untuk pemilihan wilayah kelurahan dimana sebelumnya harus memilih kecamatan, kabupaten dan provinsi terlebih dahulu, atau pemilihan program studi berdasarkan jenjang program studi.
Pada artikel kali ini akan dijelaskan bagaimana cara membuat chain selected pemilihan wilayah kelurahan berdasarkan kecamatan, kabupaten dan provinsi yang telah dipilih sebelumnya, sebagai gambaran umum berikut contoh tampilan chain select.
Untuk membuat chain selected di codeigniter dibutuhkan jquery, adapun langkah-langkahnya adalah sebagai berikut :
- Siapkan database dan tabel yang dibutuhkan yaitu tabel propinsi, kabupaten, kecamatan dan kelurahan. Pada contoh ini penulis sudah menyertakan data wilayah se-Indonesia dari database KPU.
- Atur konfigurasi dasar codeigniter meliputi base_url, database, dan default route.
- Buat model yang dibutuhkan dalam hal ini minimal membuat tiga fungsi di dalam model yaitu fungsi untuk mengambil data provinsi, data kabupaten berdasarkan provinsi yang dipilih, data kecamatan berdasarkan kabupaten yang terpilih dan data kelurahan berdasarkan kecamatan yang terpilih, berikut screenshoot coding model nya
- Buat controller, pada bagian controller akan terdapat tiga buah fungsi yaitu , fungsi pilih kabupaten yang akan dijalankan ketika user memilih salah satu provinsi, fungsi pilih_kecamatan yaitu fungsi yang akan dijalankan ketika user memilih salah satu kabupaten dan fungsi kelurahan yang akan dijalankan ketika user memilih salah satu kecamatan, berikut penggalan script-nya :
Tampak dari penggalan script diatas meskipun user disuguhi tampilan tambah data seperti pada gambar pertama, kenyataannya aplikasi menjalankan tiga buah tampilan (file php) yaitu v_drop_down_kabupaten.php, v_drop_down_kecamatan.php, dan v_drop_down_kelurahan.php.Adapun pemicu utama dari chain select adalah dropdown provinsi sehingga ketika user memilih salah satu provinsi maka akan menjalankan fungsi ajax OnChange tampilKabupaten, berikut potongan script pada dropdown pilihan provinsi.
Perhatikan pada setiap komponen dropdown akan memiliki name dan id, pada gambar diatas name=”provinsi_id” akan berfungsi sebagai pengirim data ke database, sedangkan id=”provinsi_id” akan berfungsi sebagai id element yang diberikan action oleh user dalam hal ini memilih, kemudian action tersebut akan menjalankan fungsi javascript tampilKabupaten.
Pun pada komponen dropdown kabupaten akan memiliki name dan id dan ketika user memilih salah satu kabupaten akan memicu menjalankan javascript pada event OnChange, dan begitupula pada komponen dropdown kecamatan.
Dari uraan diatas maka anda harus membuat javascript untuk menangani ketiga event OnChange tersebut, dibagian bawah form penambahan data.
- Sebelum membuat javascript OnChange, load terlebih dahulu jquery sesuaikan dengan versi yang anda miliki.
- Kemudian buat javascript untuk meng-handle event onchange pada komponen select
- Berikutnya buat tiga buah view dalam hal ini :v_drop_down_kabupten, v_drop_down_kecamatan dan v_drop_down_kelurahan, adapun isinya adalah sebagai berikut :v_drop_down_kabupten.php
v_drop_down_kecamatan.php
v_drop_down_kelurahan.php
- Jalankan
- Untuk mempelajari silahkan download file kerjanya
Mas,
Mau tanya donks, kalau dari script yang ini:
public function ambil_kabupaten($kode_prop){$this->db->where('id_provinsi',$kode_prop);
untuk $kode_prop nya itu berfungsi atau terkait dengan script yang mana ya mas?apakah itu menandakan/menyatakan bahwa: fungsi kabupaten = $kode_prop, maka pada database dimana id_provinsi yang dipilih jalankan fungsi ambil_kabupaten ini. Kira2 logikanya begitu ya mas?
Soalnya saya nambahkan dropdown baru, — Pilih RW — dan — Pilih RT –, buat bapak saya mas biar mudah, maklum sdh udzur.
saya tambahkan tabel nomor rw dan tabel nomor rt, didalam tabel tsb :
Tabel nomor rw -> id_rw | nmr_rw
Tabel nomor_rt -> id_rt | nmr_rt | id_rw
Tapi setelah saya tambahkan script untuk memunculkan dropdown rw dan rt, rw nya dapat ditarik datanya, sedangkan untuk rt tidak terpanggil, hanya ada tulisan : — Belum Ada Nomor RT —
padahal saya sudah tambahkan di javascript, controller, model dan viewnya. Kira-kira ada yang kurang nda ya mas?
Mohon maaf jikan mengganggu, terimakasih atas kesediaan waktunya mas jika berkenan untuk membantu.
Terima Kasih.
Sudah dapat mas, ternyata saya salah menulis id, yang seharusnya rw_id malah saya tulis rt_id dibagian javascriptnya di file v_tambah_mahasiswa, cuma kok nda keluar semua ya nomor RT nya, kalau saya pilih RW hanya 1 RT yang keluar dan itupun salah ID, seharusnya berada di RW X malah yg keluar RT di RW Y.
Padahal di tabel RT saya ada 15 RT, dan di RW X terdapat 6 RT tp yang keluar cuma satu RT, dan itupun salah RW. Salah dimana ya mas?
Terima kasih mas jika berkenan mencerahkan pikiran saya 😉
Sepertinya masih salah menempatkan id_rt yang berhubungan dengan id_rw tu mbak, coba dicek lagi sinkronisasi id di tabel rw dan rt dan di scriptnya.
silahkan dikirim scriptnya ada mbak ke oyasuryana@yahoo.com
databasenya error
g bisa di upload bang
Bkn error tp db nya lebig dr 2mb… php agan diset dl supaya bida upload diatas 2mb… edit file php.ini.
gmana set di php untuk databaseyang lebih 2 mb
baca disini https://www.a2hosting.com/kb/developer-corner/php/using-php-directives-in-custom-htaccess-files/setting-the-php-maximum-upload-file-size-in-an-htaccess-file
Mas, Saya mengikuti langkah2 di atas dengan sedikit modifikasi. Namun ketika pilihannya select boxnya hanya punya satu nilai atau opsi maka dia tidak dapat memilih, atau javascript onchange nya tidak bekerja. Itu bgmana ya Mas? thx
maaf mungkin pertanyaan gue agak oot dikit..
ini kan saat input data ke dalam database yang masuk itu id provinsi,id kabupaten dst..
tapi seumpama yang di inginkan itu data yang masuk kedalam database itu nama provinsi,nama kabupaten..
bukan idnya yang masuk..
itu di atur di mananya yah??
di file .js nya pada bagian $.post(url nya …diganti dengan $(kompnen_select).val()
maaf mass..
saya cari di file .js untuk bagian $.post(url saya tidak dapat yah..
maaf banyak nanya..
Assalamualaikum, mas boleh minta link download yang ngga error? maaf sebelum nya saya masih belajar.
Tolong kirim ke marhenisetyowatii@gmail.com . Terimakasih sebelum nya
link na eror
pake yang google drive
maaf sebelumnya saya msih bingung sma yg kode $kode_prop, soalnya di program saya ga muncul namanya.
misalnya saya cuman buat 2 chain, provinsi dan kabupaten, tpi nama kabupatennya tidak muncul setelah memilih nama provinsi.
tolong penjelasannya..
Mas itu kan buat add data ya ,, kalo semisal buat editnya gmn ya ,, jadi data yang sudah di pilih cara menampilkannya gmn ya .. tolong dijawab
saya bingung unt proses selected setelah data di simpan kemudian di edit. di taruh dimana yaa
Untuk selected provinsi,kabupaten,kecamatan,desa terpilih
Terima kasih kak, sangat membantu
kalo ane migrasiin ke CI 3.x
kok eror di controllernya pas function tambah()
$this->db->anggota_enum(…
sudah di ubah menjadi 8mb tetp gak bisa eror duplicate primary
duplicate primary ga ada hubungan dengan ukuran tapi ada primary key yang sama…kosong kan dulu tabel nya
kalo boleh mintak script untuk db nya aja bang
Itu tinggal download di google drive
sudah berhasil mas Ozs, trims banyak 😀
sudah berhasil mas Ozs, terima kasih banyak 😀
public function ambil_kabupaten($kode_prop)
untuk $kode_prop, $kode_kab itu berfungsi buat apa ya mas.
soalnya ketika saya pilih provinsi, yg muncul di kabupaten ‘- belum ada kabupaten-‘
mohon pencerahannya 🙂
fungsi untuk menampilkan kabupaten berdasarkan kode propinsi yang terpilih
tapi masih saja mas, apa itu hanya di model saja?
soalnya di controller dan view ga ada ya