Dropdown Chained AJAX di Codeigniter

Dokumentasi untuk membuat form dropdown yang mungkin sering dipakai untuk menampilkan data yang berurutan, saya sengaja membuatnya dengan library yang sudah jadi, yaitu Chained selects

1. Pastikan Codeigniter sudah terinstall di local server

2. Buatlah Database codeigniter_tutorial

Buatlah table database, berikut terlampir dump nya download link diatas

  1. dd_provinsi
  2. dd_kota
  3. dd_kecamatan
  4. dd_desa

3. Buatlah Model Dropdown_chained_model.php

dibawah ini adalah beberapa function model Dropdown_chained_model untuk memanggil record database yang ada di table referensi dd_propinsi, dd_kota, dd_kecamatan, dd_desa. yang nantinya dipersiapkan untuk di jalankan di controller Dropdown_chained

   public function get_propinsi()
   {
      $get = $this->db->get('dd_propinsi');
      return $get;
   }

   public function get_kota($propinsi)
   {
      $this->db->where('id_propinsi', $propinsi);
      $get = $this->db->get('dd_kota');
      return $get;
   }

   public function get_kecamatan($kota)
   {
      $this->db->where('id_kota', $kota);
      $get = $this->db->get('dd_kecamatan');
      return $get;
   }

   public function get_desa($kecamatan)
   {
      $this->db->where('id_kecamatan', $kecamatan);
      $get = $this->db->get('dd_desa');
      return $get;
   }

4. Buatlah Controller Dropdown_chained.php

dibawah ini adalah beberapa function dari controller dropdown_chained.php, dimana ada 3 function php untuk memanggil data referensi provinsi, kabupaten/kota, kecamatan dan desa

  1. get_kota()
  2. get_kecamatan()
  3. get_desa()
public function get_kota()
{
    $propinsi = $_GET['propinsi'];

    $arr_data = array(
         'id_propinsi' => $propinsi
    );

    $get_kabkota = $this->model->get_kota($propinsi)->result();

    $arr_kabkota = array();
    foreach($get_kabkota as $row)
    {
       $arr_kabkota[$row->id_kota] = $row->nama;
    }

    $json = json_encode($arr_kabkota);
    echo $json;
}
public function get_kecamatan()
{
   $kota = $_GET['kota'];

   $arr_data = array(
      'id_kota' => $kota
   );

   $get_kecamatan = $this->model->get_kecamatan($kota)->result();

   $arr_kecamatan = array();
   foreach($get_kecamatan as $row)
   {
      $arr_kecamatan[$row->id] = $row->nama;
   }

   $json = json_encode($arr_kecamatan);
   echo $json;
}
public function get_desa()
{
   $kecamatan = $_GET['kecamatan'];

   $arr_data = array(
      'id_kecamatan' => $kecamatan
   );

   $get_desa = $this->model->get_desa($kecamatan)->result();

   $arr_desa = array();
   foreach($get_desa as $row)
   {
      $arr_desa[$row->id] = $row->nama;
   }

   $json = json_encode($arr_desa);
   echo $json;
}

function get_kota ini berfungsi untuk mengambil referensi data kabupaten/kota sesuai dengan filter provinsi yang dipilih, begitupula dengan 2 function lainnya yaitu get_kecamatan() dan get_desa(), kecamatan terkait dengan filter dari kabupaten/kota dan desa terkait dengan filter kecamatan

5. Buatlah Views Dropdown_chained.php

sangat disarankan disamakan terlebih dahulu seperti contoh dibawah, apabila sudah mengerti silahkan di custom scriptnya 😀

<form action="">
   <fieldset>
      <legend>Dropdown Chained Ajax</legend>

      <p>
         <select name="propinsi" id="propinsi" style="width: 30%;">
            <option value="">PILIH PROPINSI</option>
            <?php foreach($propinsi->result() as $row_propinsi): ?>
            <option value="<?php echo $row_propinsi->id_propinsi; ?>"><?php echo $row_propinsi->nama; ?></option>
            <?php endforeach; ?>
         </select>
      </p>
      
      <p>
         <select name="kota" id="kota" style="width: 30%;">
            <option value="">PILIH KOTA</option>
         </select>
      </p>
      
      <p>
         <select name="kecamatan" id="kecamatan" style="width: 30%;">
            <option value="">PILIH KECAMATAN</option>
         </select>
      </p>
      
      <p>
         <select name="desa" id="desa" style="width: 30%;">
            <option value="">PILIH DESA</option>
         </select>
      </p>
   </fieldset>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo site_url('assets/js/chained/jquery.chained.js?v=1.0.0'); ?>" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo site_url('assets/js/chained/jquery.chained.remote.js?v=1.0.0'); ?>" type="text/javascript" charset="utf-8"></script>
<link href="<?php echo site_url('assets/css/select2.min.css'); ?>" rel="stylesheet" />
<script src="<?php echo site_url('assets/js/select2/select2.min.js'); ?>"></script>

<script>
   $(document).ready(function() {
       $('select').select2();
   });

   $("#kota").remoteChained({
      parents : "#propinsi",
      url : "<?php echo site_url('dropdown_chained/get_kota'); ?>"
   });

   $("#kecamatan").remoteChained({
      parents : "#kota",
      url : "<?php echo site_url('dropdown_chained/get_kecamatan'); ?>"
   });

   $("#desa").remoteChained({
      parents : "#kecamatan",
      url : "<?php echo site_url('dropdown_chained/get_desa'); ?>"
   });
</script>

DOWNLOAD SOURCEDEMO

Leave a Reply

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