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