Dropdown Dinamis Propinsi Kabupaten dengan Code Igniter

Gimana caranya membuat combo box / drop down select yang dinamis di code igniter. Drop down sederhana saja kabupaten dan propinsi, dimana combo box kabupaten (drop down ke 2) berubah dinamis mengikuti perubahan pada (drop down 1). Idenya sama seperti yang telah dikerjakan mas ucid.

a

Pertama kita siapkan dulu tabel-tabel yang diperlukan :
1. tabel propinsi dengan struktur sebagai berikut :

- id
- nama_propinsi

2. tabel kabupaten dengan struktur sebagai berikut ;

- id
- id_propinsi
- nama_kabupaten

dump tabel dalam format sql dapat di download di sini

di view-nya seperti ini (data propinsi saya hardcode kalo mau ringkas silahkan pakai query database saja) :

			echo "<p> <label> Propinsi : </label>";
			$options = array(
				'1'=>'DKI Jakarta',
				'10'=> 'Jawa Barat',
				'11'=> 'Jawa Tengah',
				'13'=> 'DI Yogyakarta',
				'12'=> 'Jawa Timur',
				'1'=> 'Nanggroe Aceh Darussalam',
				'2'=> 'Sumatera Utara',
				'3'=> 'Sumatera Barat',
				'4'=> 'Riau',
				'5'=> 'Jambi',
				'6'=> 'Sumatera Selatan',
				'8'=> 'Lampung',
				'14'=> 'Kalimantan Barat',
				'15'=> 'Kalimantan Tengah',
				'16'=> 'Kalimantan Selatan',
				'17'=> 'Kalimantan Timur',
				'18'=> 'Sulawesi Utara',
				'19'=> 'Sulawesi Tengah',
				'21'=> 'Sulawesi Selatan',
				'20'=> 'Sulawesi Tenggara',
				'25'=> 'Maluku',
				'22'=> 'Bali',
				'23'=> 'Nusa Tenggara Barat',
				'24'=> 'Nusa Tenggara Timur',
				'33'=> 'Papua',
				'7'=> 'Bengkulu',
				'28'=> 'Banten',
				'32'=> 'Maluku Utara',
				'29'=> 'Bangka Belitung',
				'30'=> 'Gorontalo',
				'31'=> 'Irian Jaya Barat',
				'32'=> 'Kepulauan Riau'
			);
			$js='onChange="getCity(\'getCity/\'+this.value)"';
			echo form_dropdown('alamat_propinsi', $options, '01',$js);

			echo "<p> <label>Kabupaten : </label></p>";
			echo "<div id=\"kabupaten\"><br /></div>";

kemudian file js nya (saya taruh di /public/js/ajax.js)

function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCity(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if “OK”
if (req.status == 200) {
document.getElementById('kabupaten').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}

kemudian di model nya :

	function getCity()
	{
		$id_prop = $this->uri->segment(3);
		$data_kab = $this -> mrumahtangga -> getKabupaten($id_prop);

		if (!empty($data_kab)){
		$data_kabupaten = '<p><select name=\'alamat_kabupaten\' >';
		foreach($data_kab as $data){
			$data_kabupaten .= '<option value=\''.$data.'\'>'.ucfirst(strtolower($data)).'</option>';
		}
		$data_kabupaten .= '</select></p>';
		}else{
			$data_kabupaten = '<input type="text" name="alamat_kabupaten" value='.$data.' id="alamat_kabupaten" size="60"  />';
		}
		echo $data_kabupaten;

	}

ok segitu dulu ntar saya bikinkan penjelasannya yang lebih detail

referensi diambil dari :
- http://www.bengkelprogram.com/data-artikel-330.0.bps
- http://ucid.wordpress.com/2009/03/27/ajax_codeigniter/

kode program selengkapnya dapat didownload di sini

About this entry

You’re currently reading “Dropdown Dinamis Propinsi Kabupaten dengan Code Igniter,” an entry on ponidi

Published:
May 2, 2009 / 3:17 am
Category:
Code Igniter
Tags:
, ,