Kali ini kita akan mencoba membuat combo box bertingkat dengan plugini Select 2. Dengan combo box yang dipadukan plugin Select2 akan memberikan kemudahan bagi pengguna untuk melakukan pencarian pada dropdown data, terutama jika datanya dalam jumlah yang banyak. Nah, selain select 2 kita akan membuatnya dalam bentuk combo box bertingkat, dimana ketika kita memilih satu option pada combo box pertama, maka otomatis combo box kedua akan menyesuikan kategorinya sesuai dengan pilihan combo box pertama, begitu seterusnya. Contoh konkritnya adalah data propinsi, dimana ketika kita memilih satu propinsi dari combo box propinsi, maka di combo box kabupaten, akan menyesuaikan isi optionnya hanya kabupaten-kabupaten yang berada di bawah propinsi pilihan combo box propinsi. Combo box bertingkat ini juga akan menggunakan kemampuan dari ajax jquery agar bisa loading tanpa reload halaman aplikasi.
Langsung saja hal-hal yang diperlukan untuk membuat aplikasi combo box bertingkat sebagai berikut:
Membuat database
Membuat database dengan tabel propinsi, tabel kabupaten, tabel kecamatan dan tabel kelurahan jika memang diperlukan. Untuk lebih mudahnya dapat mendownload tabel daerah.sql
Membuat model
Buat model dengan nama Combobox_model.php, kemudian ketikkan script dibawah
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Combobox_model extends CI_Model { function getprov($searchTerm = "") { $this->db->select('id_prov, nama'); $this->db->where("nama like '%" . $searchTerm . "%' "); $this->db->order_by('id_prov', 'asc'); $fetched_records = $this->db->get('provinsi'); $dataprov = $fetched_records->result_array(); $data = array(); foreach ($dataprov as $prov) { $data[] = array("id" => $prov['id_prov'], "text" => $prov['nama']); } return $data; } function getkab($id_prov, $searchTerm = "") { $this->db->select('id_kab, nama'); $this->db->where('id_prov', $id_prov); $this->db->where("nama like '%" . $searchTerm . "%' "); $this->db->order_by('id_kab', 'asc'); $fetched_records = $this->db->get('kabupaten'); $datakab = $fetched_records->result_array(); $data = array(); foreach ($datakab as $kab) { $data[] = array("id" => $kab['id_kab'], "text" => $kab['nama']); } return $data; } function getkec($id_kab, $searchTerm = "") { $this->db->select('id_kec, nama'); $this->db->where('id_kab', $id_kab); $this->db->where("nama like '%" . $searchTerm . "%' "); $this->db->order_by('id_kec', 'asc'); $fetched_records = $this->db->get('kecamatan'); $datakec = $fetched_records->result_array(); $data = array(); foreach ($datakec as $kec) { $data[] = array("id" => $kec['id_kec'], "text" => $kec['nama']); } return $data; } function getkel($id_kec, $searchTerm = "") { $this->db->select('id_kel, nama'); $this->db->where('id_kec', $id_kec); $this->db->where("nama like '%" . $searchTerm . "%' "); $this->db->order_by('id_kel', 'asc'); $fetched_records = $this->db->get('kelurahan'); $datakel = $fetched_records->result_array(); $data = array(); foreach ($datakel as $kel) { $data[] = array("id" => $kel['id_kel'], "text" => $kel['nama']); } return $data; } } |
Membuat controller
Buat controller dengan nama Combobox.php, kemudian ketikkan script dibawah
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Combobox extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('Combobox_model'); } public function index() { $this->load->view('combobox'); } // Provinsi public function getdataprov() { $searchTerm = $this->input->post('searchTerm'); $response = $this->Combobox_model->getprov($searchTerm); echo json_encode($response); } // Kabupaten public function getdatakab($id_prov) { $searchTerm = $this->input->post('searchTerm'); $response = $this->Combobox_model->getkab($id_prov, $searchTerm); echo json_encode($response); } // Kecamatan public function getdatakec($id_kab) { $searchTerm = $this->input->post('searchTerm'); $response = $this->Combobox_model->getkec($id_kab, $searchTerm); echo json_encode($response); } // Kelurahan public function getdatakel($id_kec) { $searchTerm = $this->input->post('searchTerm'); $response = $this->Combobox_model->getkel($id_kec, $searchTerm); echo json_encode($response); } } |
Membuat view
Buat view dengan nama combobox.php, kemudian ketikkan script dibawah:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ComboBox Bertingkat dengan Select 2 dan JQuery</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <!-- JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- Select2 --> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> </head> <body> <div class="container"> <div class="col-md-6"> <h3>ComboBox Bertingkat dengan Select 2 dan JQuery</h3> <form> <div class="form-group"> <label for="provinsi">Provinsi</label> <select id="provinsi" name="provinsi" class="form-control select2"> <option value="" selected>Pilih Provinsi</option> </select> </div> <div class="form-group"> <label for="kabupaten">Kabupaten</label> <select id="kabupaten" name="kabupaten" class="form-control select2"> <option value="" selected>Pilih Kabupaten</option> </select> </div> <div class="form-group"> <label for="kecamatan">Kecamatan</label> <select id="kecamatan" name="kecamatan" class="form-control select2"> <option value="" selected>Pilih kecamatan</option> </select> </div> <div class="form-group"> <label for="kelurahan">Kelurahan</label> <select id="kelurahan" name="kelurahan" class="form-control select2"> <option value="" selected>Pilih kelurahan</option> </select> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> <script type="text/javascript"> // Provinsi $(document).ready(function() { $("#provinsi").select2({ ajax: { url: '<?= base_url() ?>combobox/getdataprov', type: "post", dataType: 'json', delay: 200, data: function(params) { return { searchTerm: params.term }; }, processResults: function(response) { return { results: response }; }, cache: true } }); }); // Kabupaten $("#provinsi").change(function() { var id_prov = $("#provinsi").val(); $("#kabupaten").select2({ ajax: { url: '<?= base_url() ?>combobox/getdatakab/' + id_prov, type: "post", dataType: 'json', delay: 200, data: function(params) { return { searchTerm: params.term }; }, processResults: function(response) { return { results: response }; }, cache: true } }); }); // Kecamatan $("#kabupaten").change(function() { var id_kab = $("#kabupaten").val(); $("#kecamatan").select2({ ajax: { url: '<?= base_url() ?>combobox/getdatakec/' + id_kab, type: "post", dataType: 'json', delay: 200, data: function(params) { return { searchTerm: params.term }; }, processResults: function(response) { return { results: response }; }, cache: true } }); }); // Kelurahan $("#kecamatan").change(function() { var id_kac = $("#kecamatan").val(); $("#kelurahan").select2({ ajax: { url: '<?= base_url() ?>combobox/getdatakel/' + id_kac, type: "post", dataType: 'json', delay: 200, data: function(params) { return { searchTerm: params.term }; }, processResults: function(response) { return { results: response }; }, cache: true } }); }); </script> </body> </html> |
Jika langkah-langkah di atas sudah sesuai maka akan didapatkan hasil seperti berikut ini
Nah, demikian bahasan kita kali ini tentang combobox bertingkat menggunakan plugin select2 dan JQuery. Jika ada yang kurang jelas silahkan isi kolom komentar. Terimakasih.
Mantap bos tutor nya. cuma masalahnya pas udah proses input data malah yang keluar “id” nya bukan “nama” kel, kec, kab atau prov nya..
Terimakasih komentarnya.
Kalau yang akan diinput di tabel namanya tinggal di ganti saja dari
$data[] = array(“id” => $prov[‘id_prov’], “text” => $prov[‘nama’]);
menjadi
$data[] = array(“id” => $prov[‘nama’], “text” => $prov[‘nama’]);
Semoga membantu.
Ini bisa digunakan untuk versi CI berapa ya
ini menggunakan versi 3
ini bisa untuk semua versi CI 3?
bisa
ini gimana ya cara lengkapnya padahal sudah saya copy semua tapi gk keluar data dropdownnya?,
di confignya gimana?
Untuk konfigurasi standar saja.
$autoload[‘libraries’] = array(‘database’);
sama di config autoload helpernya tambahin [‘url’]
di config autoloadnya tambahin [‘database’]
sama di config helpernya tambahin [‘url’]
Terimakasih
Klo saya punya script seperti ini $(‘.container’).on(‘change’, ‘#provinsilokasi’ + i, function() {…}), dan saya ingin menggunakan select2, gimana ya Om???
Mungkin bisa diperjelas prosesnya, biar saya ada gambaran input dan outputnya nanti seperti apa.
min mau tanya, kalau yg di tampilkan bukan hanya nama kelurahan gitu gimana ya?
jadi mau sekalian nampilin nama kelurahan – kode pos.
Bisa dengan modifikasi Function getkel() pada Model, dari
function getkel($id_kec, $searchTerm = “”)
{
$this->db->select(‘id_kel, nama’);
$this->db->where(‘id_kec’, $id_kec);
$this->db->where(“nama like ‘%” . $searchTerm . “%’ “);
$this->db->order_by(‘id_kel’, ‘asc’);
$fetched_records = $this->db->get(‘kelurahan’);
$datakel = $fetched_records->result_array();
$data = array();
foreach ($datakel as $kel) {
$data[] = array(“id” => $kel[‘id_kel’], “text” => $kel[‘nama’]);
}
return $data;
}
menjadi
function getkel($id_kec, $searchTerm = “”)
{
$this->db->select(‘id_kel, nama, kode_pos’);
$this->db->where(‘id_kec’, $id_kec);
$this->db->where(“nama like ‘%” . $searchTerm . “%’ “);
$this->db->where(“kode_pos like ‘%” . $searchTerm . “%’ “);
$this->db->order_by(‘id_kel’, ‘asc’);
$fetched_records = $this->db->get(‘kelurahan’);
$datakel = $fetched_records->result_array();
$data = array();
foreach ($datakel as $kel) {
$data[] = array(“id” => $kel[‘id_kel’], “text” => $kel[‘nama’] . ‘ – ‘ . $kel[‘kode_pos’] );
}
return $data;
}
dengan catatan di tabel juga ada field kode_pos ya.. (bisa join dengan table kode_pos atau memang di data kelurahan ada field kode_pos)
Semoga bermanfaat
terima kasih bang, kok gak bisa muncul nama2 nya ya…
apanya yg salah?
Terima kasih.
boleh mint nmr WA nya bang
Badrus, 082341229000
Kalau gak muncul nama-namanya biasanya url di ajaxnya masih ada yg belum benar. Coba di inspect element, lihat di tab network, agar pesan error-nya bisa dilihat.
bang klo form editnya gmn y bang, mungkin bs dibantu
Oke, nanti coba dibuatkan artikel baru untuk edit datanya. Terimakasih.
Kalau edit bagaimana bang?
bisa di ikuti tutorial berikut https://mylitenotes.com/codeigniter/codeigniter-3-membuat-crud-menggunakan-input-select2/
terimakasih
bisa di ikuti tutorial berikut https://mylitenotes.com/codeigniter/codeigniter-3-membuat-crud-menggunakan-input-select2/
terimakasih
permisi bang mau tanya ini dropdownnya udah bisa tampil tapi ngga bisa diklik kira kira masalahnya apa ya bang terima kasih
Untuk yang masih bermasalah, silahkan download source code dan database pada menu DOWNLOAD (https://mylitenotes.com/downloads/). Terimakasih.
Permisi Bang, saya sudah mencobanya juga tapi ketika diklik pilih provinsi hasilnya The Result could not be loaded
dan di console develover tools pesan errornya %3C?=%20base_url()%20?%3Ecombobox/getdataprov
Letak masalahnya di mana ya?
Terima kasih bang
Jika hasilnya The Result could not be loaded, lihat url di ajaxnya apakah sudah benar. Coba cek dengan ketik langsung url pada web browser, lihat pesan error-nya. Atau bisa download source code dan database pada menu DOWNLOAD (https://mylitenotes.com/downloads/). Terimakasih.
Terima kasih atas petunjuknya bang.
saya coba lagi dan berhasil
itu karena penulisan url di ajax
Kalau untuk form edit bagaimana ya suhu…
bisa di ikuti tutorial berikut https://mylitenotes.com/codeigniter/codeigniter-3-membuat-crud-menggunakan-input-select2/
terimakasih
ijin kak saat diketik langsung urlnya di browser datanya muncul tapi kalo di dropdownnya gak muncul itu kenapa ya kak?
gan hasilnya kok masih terus The Result could not be loaded ya???
eh sudah bisa.. ternyata hanya perlu di tambah index.php di url ajax nya
Bagaimana kalau edit terima kasih
bisa di ikuti tutorial berikut https://mylitenotes.com/codeigniter/codeigniter-3-membuat-crud-menggunakan-input-select2/
terimakasih
Terimakasih gan, ini sangat membantu. kalau untuk narik data pas di form editnya biar langsung selected apakah ada tutorialnya?
bisa di ikuti tutorial berikut https://mylitenotes.com/codeigniter/codeigniter-3-membuat-crud-menggunakan-input-select2/
terimakasih
Hallo kaa adMiin..
Artikel & tutorialnya sangat baik..
Boleh request engga kaa..
Bisa membahas aplikasi apa aja tapi low code yang bisa digunakan di instansi pemerintahan kecuali peta kaa..
Terimakasih..
gan mau nanya, pada saat proses kabupaten, ko dia gak mau muncul ya ?
sudah saya ikutin punya agan tapi gak tampil jga
bank kl tidak memakai id_prov…tapi memakai kd_prov/kd_kec/kd_desa/kd_kab
kodenya menjadi gmn bank….soalnya gagal trus
…trims