Chained DropDown dengan Jquery dan Codeigniter

*gambarnya aneh 😀

Selamat datang kembali, yeah… setelah kemarin pusing dengan aktifitas di tempat kerja, akhirnya bisa refreshing lagi, kangen-kangenan lagi dengan Codeigniter dan JQuery. Rencananya sih pengen nyoba yang 2.0, tapi nanggung ah, masih pake yang versi lama dulu.

Beberapa waktu lalu sempat ditanyain cara buat dropdown yang nyambung (istilahnya banyak sih), ada pula yang kasih istilah Sub Dropdown. Yaitu select/dropdown 1 yang kalo dipilih, nanti dropdown 2 listnya akan berubah sesuai kategori di dropdown 1. Contoh sederhananya ya ketika milih propinsi, maka dorpdown 2 akan muncul pilihan kota sesuai propinsi di drodown 1 (kaya di skrinsut 😀 ).

Karena saya biasa pake CI, ya wes langsung ta buat aja..

Controller :

<?php
class Chain extends Controller{

	function __construct(){
		parent::Controller();
		$this->load->model('MChain');
	}

	function index(){

		$data['option_propinsi'] = $this->MChain->getPropinsiList();
		$this->load->view('chain/index',$data);
	}

	function select_kota(){
		$data['option_kota'] = $this->MChain->getKotaList();
		$this->load->view('chain/kota',$data);
	}
}
?>

Dua function, yang pertama index, untuk menampilkan halaman awalnya, kemudian select_kota itu dijalankan lewat ajax untuk memanggil dropdowon dua yang isinya kota sesuai propinsi pada dropdown pertama.

Model :

<?php
class MChain extends Model{
	function __construct(){
		parent::Model();
	}

	function getPropinsiList(){
		$result = array();
		$this->db->select('*');
		$this->db->from('propinsi');
		$this->db->order_by('propinsi','ASC');
		$array_keys_values = $this->db->get();
        foreach ($array_keys_values->result() as $row)
        {
            $result[0]= '-Pilih Propinsi-';
            $result[$row->propinsi_id]= $row->propinsi;
        }

        return $result;
	}

	function getKotaList(){
		$propinsi_id = $this->input->post('propinsi_id');
		$result = array();
		$this->db->select('*');
		$this->db->from('kota_kabupaten');
		$this->db->where('propinsi_id',$propinsi_id);
		$this->db->order_by('kota_kabupaten','ASC');
		$array_keys_values = $this->db->get();
        foreach ($array_keys_values->result() as $row)
        {
            $result[0]= '-Pilih Kota / Kabupaten-';
            $result[$row->kota_id]= $row->kota_kabupaten;
        }

        return $result;
	}

}
?>

Dua fungsi yang hampir sama, sama-sama memanggil isi dari tabel, kemudian ditampilkan sebagi list pada dropdown. Kalo fungsi yang kedua, itu ditambah statement where, sesuai kategori propinsi yang dipilih.

View :
Saya buat dua view, yang pertama untuk halaman depannya, kemudian yang kedua adalah untuk menampilkan dropdown dua untuk kota/kabupaten. Viewnya sebagai berikut :
index.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chain Select With Codeigniter and Jquery</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
		<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/	css" media="all" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- page content -->
    <div id="propinsi" style="width:250px;float:left;">
    Propinsi : <br/>
    <?php
    	echo form_dropdown("provinsi_id",$option_propinsi,"","id='propinsi_id'");
    ?>
    </div>
    <div id="kota">
    Kota / Kabupaten :<br/>
   	<?php
    	echo form_dropdown("kota_id",array('Pilih Kota / Kabupaten'=>'Pilih Propinsi Dahulu'),'','disabled');
    ?>
    </div>
    <script type="text/javascript">
	  	$("#propinsi_id").change(function(){
	    		var propinsi_id = {propinsi_id:$("#propinsi_id").val()};
	    		$.ajax({
						type: "POST",
						url : "<?php echo site_url('chain/select_kota')?>",
						data: propinsi_id,
						success: function(msg){
							$('#kota').html(msg);
						}
				  	});
	    });
	   </script>
  </body>
</html>

kota.php

Kota / Kabupaten :<br/>
   	<?php
    	echo form_dropdown("kota_id",$option_kota,'');
    ?>

Prosesnya adalah di view index.php, dropdown pertama diberikan sebuah id, kemudian id tersebut dipanggil dengan jquery, dengan menambahkan parameter value yg dipilih. Kemudian memanggil controller select_kota, memanggil model getKotaList sesuai paramater pada dropdown propinsi, lalu hasilnya akan diletakkan pada div kota. Begitulah kira-kira langkahnya 🙂

Source nya ada di sini

Ada beberapa bugs ketika saya coba, ketika di coba di localhost. semua berjalan lancar, tetapi ketika saya coba upload di hosting, ternyata scriptnya jadi ga jalan.. POST nya ga bisa dikirim oleh jquery… aneh.. ada yang bisa nemu erorrnya??

30-03-2011 : Pagi ini saya upload ulang filenya, dan tiba-tiba bisa jalan di servernya. Coba di cek deh http://dudu.web.id/ci_ku/index.php/chain ga tau kenapa..

Oh ya, unttuk databasenya saya download dari sini, thx to mas @matriphe

  • kak Dwi Wijonarko as kak dudu… akhirnya ketemu salahnya, setelah aku replace satu2. thanks banget yah udah diajarin. Jazakallah…

  • Mas uda dicoba itu juga..ni code yang saya bikin..

    <link rel="stylesheet" href="jqgrid/jquery-ui.css’;?>” type=”text/css” media=”all” />
    <link rel="stylesheet" href="jqgrid/ui.theme.css’;?>” type=”text/css” media=”all” />
    <script src="jqgrid/jquery.min
    .js” type=”text/javascript”>
    <script src="jqgrid/jquery-ui.min.js” type=”text/javascript”>

    Nah, ini yang setelah di CTRL+U, Hrefnya gini..

    href=”http://localhost/SIA/jqgrid/jquery-ui.css’;?>”
    href=”http://localhost/SIA/jqgrid/ui.theme.css’;?>”

    Kira2 salah apa lagi ya??
    ui.theme.css, jquery.min.js, dan namafile jqueri lainnya itu di donlod.. Bingung mas salahnya dimana lagi, padahal semuanya uda sesuai..
    Jadinya stuck..
    Please Help.. TT

    • kenapa ada tanda “?>”, harusnya kan href=”http://localhost/SIA/jqgrid/jquery-ui.css” saja..

  • Mas via email ya..
    Codenya di copiiin kesini jadi rubah2..

    Tolongin ya mas..
    Stuck ni,, jadi gabisa ngerjain yang lainnya..

    Mudah2an mas mau berkenan melihatnya..
    🙂
    #mukamemelas

    • silahkan, tapi saya cek besok ya 🙂

  • Okey..makasi sebelumnya..
    Ditunggu banged..

  • kalau POST http://localhost/latihan/chain/select_kota 404 Not Found keliru di apanya ya??

    • keliru di penamaan controller atau method di controllernya

  • kalau yang ini salahnya dimana:
    kota:

    * ini yang kota msh blm bs muncul dropdownnya..

    • maaf eroornya tidak terlihat

  • dah bisa koq..cm skrg ada masalah lagi. klo membuat fasilitas search menggunakan dropdown bs g??

  • bukan nanti orang mau mencari produk dengan memilih dengan dropdown jika memilih produk A maka di bawahnya ada A1 terus dibawahnya ada submit cari..aplikasinya gmn ya??

    • Tinggal ditambahkan submit sama input teks kan

  • iya udah itu..tapi dipencariannnya belum berhasil karena yg dibaca misal kota A kode 01 di pencarian kota A itu kebaca 01 modelnya gmn??
    ini contoh modelnya

    function getpropinsiList(){
    $id_kat_propinsi = $this->input->post(‘id_kat_propinsi ‘);
    $result = array();
    $this->db->select(‘*’);
    $this->db->from(‘propinsi);

    $this->db->order_by(‘name’,’ASC’);
    $array_keys_values = $this->db->get();
    foreach ($array_keys_values->result() as $row)
    {
    $result[0]= ‘-Pilih Propinsi-‘;
    $result[$row->id_kat_propinsi]= $row->name;

    }

    return $result;
    }

    • ya di select nya diganti ke A jangan ke 01

  • Kalau buat fasilitas pencarian pake chaiin select gmn codingnya?
    misal kita cari produk A nanti dibawahnya produk A1
    saya dah bs buat chaiinnya tp ketika submit hasil pencariannya blm bs..
    nanti pengennya di pencarian hasilnya “pencarian A produk A1:”
    sementara ini untuk A kebaca id ex 01.. jadi hasilnya “pencarian 01 produk A1:”

  • mjy

    Mas dudu,

    saya sudah bikin, tapi untuk cild combonya kok masih disable ya? kira2 kenapa? apa Jquerynya? ato gimana? Saya juga masih raba2 mengenai CI. Jquery sudah saya copy dilocal hasilnya juga tetap.

    Salam

    • coba di lihat pake firebug

  • ariez_zip

    udah bs tanpa harus merubah 01 ke A
    kalau $ is not defined
    $(“#category_id”).change(function(){
    itu kurang apanya??

    • tanda dolar itu dari jquery nya. Mungkin salah ketik.

  • Ayti

    An Error Was Encountered

    Unable to load the requested file: chain/index.php
    ini kenapa mas?

    • karena halaman tersebut tidak ada, fungsi pada controllernya belum dibuat / salah

  • afi

    bikin dropdown kayak gitu harus pake ci ya??
    kalo pake php biasa bisa ga?
    aku mau bikin tapi belum ngeh ama ci
    🙁

    • pake php biasa juga bisa, sesuaikan aja kodingnya.. JQuerynya tetep

  • muzlih

    mas kasih tutornya dong view hasil simpanan dari database nya. ak bingung nih gimana ngambil data nama kotanya. saya cuma dapat menampilkan id kotanya mas, mungkin mas Dudu terhormat bisa ngasih caranya ngejoint atau apa biar hasilnya keluar. saya sudah bisa sampai menyimpan ke dlm databasenya dan melakukan join pada provinsi untuk menampilkan nama provinsinya . sedangkan kotanya masih berbentuk id saja. Mohon pencerahannya

  • Aku balik lagi kak dudu….
    itu kan jquerynya pake yang 1.4 ya?
    nah kalau jquerynya upgrade ke 1.7 kok ga jalan lagi ya?
    kan klo di 1.4 pake yg seperti mas dudu saranin berhasil dengan baik, aku juga bikin tutorialnya karena ada yg nanyatriple chained dropdown
    trus kalau jquery v 1.7 gimana ya?
    aku bikinnya cuma ganti ke
    $(“#propinsi_id”).on(“change”,function(){ <—tapi gak jalan
    trus yg .delegate() juga dah diganti .on() di jquery 1.7.
    karena aku pake pyrocms v.2 dan jquerynya dah 1.6.4, jadi yg kode lama gak berfungsi.
    bisa bantu lagi?
    terima kasih….

  • Chan_uchi

    mas, mau nanya,,, bisa gak kita mengisi textbok secara dinamis sesuai pilihan di list/combobox tampa menggunakan jquery? gini mas misalnya kita mengambiil data dari tabel dan kita tampilkan menjadi pilihan di combobox ( sama kayak cotoh yang mas yang dia artikel ini) tapi disini maksud saya yang kita tampilkan bukan combobox tapi text box sesui primaryke yang kita pilih pada combobok tersebut. mohon pencerahannya mas, kalu mas berkenan secepatnya. saya tunggu ya mas.

  • Newbie Robenx

    maaf mau nanya masalah nya jquery secara live sudah bisa tertapi pas di action submit tidak ter post mohon penceahanya 

    http://pastebin.com/JVXwgYen

    • dwijonarko

      Masukan dalam parameter data untuk data yang akan di kirimkan / submit. Dalam kode anda, yang dikrimkan hanya data: id_jenis,kalo yang dimaksud adalah travo, ya silahkan di sesuaikan

  • Newbie Robenx

    Coba mas tolong dicontohkan yang dimaksud 

    • dwijonarko

      var id_jenis = { id_jenis:$(“#id_jenis”).val(),
      id_bay:$(“#id_bay”).val(),
      id_trafo:$(“#id_trafo”).val()
      };

      untuk mengirimkan parameter id_jenis, id_bay, id_trafo. Kalo code Anda tadi hanya var id_jenis = {id_jenis:$(“#id_jenis”).val()}; ya jelas saja hanya mengirimkan id_jenis saja

  • Newbie Robenx

    Sebenernya sudah jadi mas dropdown nya jadi setiap jenis trafo akan meload trafo dan objek pengukuran sudah jadi tetapi setelah di klik submit untuk mengambil dari action tidak bisa hanya  id_jenis saja yang masuk 

  • Newbie Robenx

    sudah saya coba tetapi hasil submit masi seperti ini mohon pencerahanya 🙁 

    • dwijonarko

      di cek pake firebug, paramater yg dikirmkan lewat AJAX.

  • Newbie Robenx

    aduh gimana ya caranya maklum newbie di jquery dan ajax 😀 

  • Newbie Robenx

    Setelah di submit begini mas hasilnya 😀

    Jenis Bay 1
    Nama Bay
    Objek Bay

  • anggitpy

    tutorialnya mantab. tapi itu jquery-ui nya buat apa ya? nggak perlu dipake kan?

  • harusnya bisa lewat github, atau copy paste dari artikel / github code. Soalnya ini file lama jadi sudah ga ada di komputer, tinggal di github saja 😀

  • Ahmad Nurdin

    kenapa ane tampilnya jadi 2 kali gan ?

  • Ahmad Nurdin

    mas dudu kok value yg kota nya ga masuk ke database ya ?

  • Guest

    Mas aku coba jalanin contoh diatas udah berhasil dan aku menambahkan fungsi get data dari database (untuk menampilkan semua data) juga udah berhasil. Namun saat aku menambahkan fungsi CREAD, feedback nya kok 0 ya, yg seharusnya nilainya sesuai dengan inputan, apakah code diatas tidak bisa ditambahkan fungsi CRUD? mohon pencerahannya mas dudu….
    Terima Kasih.

  • Kuere Angel

    pagi gan, numpang tanya nih gan itu saya sudah mengikuti prosedur nya si agan namun kok yg bagian kota gk bisa ke load dan tidak ada pemberitahuan error nya itu kenapa ya gan? mohon bantuannya ya gan 🙁

  • fadil

    mas mau tanya , sudah saya coba , tetapi kok form dropdown untuk kabupaten/kota nya tidak muncul ya setalah dipilih provinsi nya ? source nya sudah sama kok . mohon pencerahan nya mas . saya masih newbie soalnya hehe untuk tugas PA . terima kasih

    • tentunya script Anda tidak bisa saya koreksi kalau saya tidak melihatnya. Silahkan periksa menggunakan firebug atau developers tools milik chrome, apakah prses ajaxnya sudah benar,memanggil databasenya juga sudah benar dll

  • Mas , kalau misalkan kota nya itu tidak nge link ke halaman lain bagaimana ya ??
    jadi redirect di halaman itu juga

  • ardin

    Om Dudu, klo tigal combo box bagaimana ya?saya coba tambahkan untuk kecamatan dengan isi table:

    propinsi_id | kabupaten_id | kecamatan_id | kecamatan

    Tapi untuk kecamatannya nda keluar atau masih disable, cuman keluar sampai kabupaten, padahal saya sudah tulis ulang function di tiap2 file yang konek ke controller (chain) untuk kecamatan tp nda mudenk scriptnya alias kecamatan nda di anggap.

    Ada solusinya nda om?Tolong bantuannya om…terima kasih.

  • Halo Mas Dudu, saya mau tanya soal Ajax dan CSRF Token. Karena saya mengaktifkan fitur tersebut, jadi tanpa CSRF Token akan di blok. Nah, ini sudah saya masukkan CSRF Tokennya, tapi masukin fakultas_id – nya gmn y mas ?
    Terima Kasih

    http://pastebin.com/jkbzRV6y

  • Dini Wulandari

    Thanks Mas Dudu, tutorialnya berjalan dengan lancaar caar caar bantu banget buat skripsi nih. semoga pas di upload ke hosting ga masalah hehehehe 🙂