Menu Close

Membuat Combo Box Bertingkat dengan Plugin Select 2 pada Codeigniter 3

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

See also  Replikasi Data Tabel dari Database Lain dengan CodeIgniter

Membuat controller

Buat controller dengan nama Combobox.php, kemudian ketikkan script dibawah

Membuat view

Buat view dengan nama combobox.php, kemudian ketikkan script dibawah:

See also  Multiple Input Dinamis ke dalam Database dengan Codeigniter 3

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.

Posted in CodeIgniter

YOU MIGHT BE INTERESTED IN

40 Comments

  1. Agus

    Mantap bos tutor nya. cuma masalahnya pas udah proses input data malah yang keluar “id” nya bukan “nama” kel, kec, kab atau prov nya..

    • mylitenotes

      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.

  2. fandi

    Klo saya punya script seperti ini $(‘.container’).on(‘change’, ‘#provinsilokasi’ + i, function() {…}), dan saya ingin menggunakan select2, gimana ya Om???

  3. melvin ario

    min mau tanya, kalau yg di tampilkan bukan hanya nama kelurahan gitu gimana ya?
    jadi mau sekalian nampilin nama kelurahan – kode pos.

    • mylitenotes

      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

  4. Badrus

    terima kasih bang, kok gak bisa muncul nama2 nya ya…

    apanya yg salah?

    Terima kasih.

    boleh mint nmr WA nya bang

    Badrus, 082341229000

    • mylitenotes

      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.

  5. alfiansyah nur fahrudin

    permisi bang mau tanya ini dropdownnya udah bisa tampil tapi ngga bisa diklik kira kira masalahnya apa ya bang terima kasih

  6. Aliyas Sangkala

    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

  7. Brie

    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..

  8. adi

    gan mau nanya, pada saat proses kabupaten, ko dia gak mau muncul ya ?
    sudah saya ikutin punya agan tapi gak tampil jga

Leave a Reply

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