Membuat Dropdown dependent list Codeigniter ajax

Membuat Dropdown dependent list ( dropdown berantai ) Codeigniter ajax

Hallo blogger pada postingan sebelumnya saya telah menjelaskan tentang cara menampilkan dropdown dari database codeigniter. disini saya akan menjelaskan tentang bagaimana membuat dropdown dependent list dengan Codeigniter.

Sebelum masuk ke pembahasan saya akan menjelaskan sedikit tentang apa itu dropdown dependent list. Dropdown dependent list atau bisa juga disebut chaining dropdown merupakan dua buah dropdown yang saling berhubungan (berantai). contoh simplenya adalah ketika anda membuat form alamat anda menggunakan input type dropdown untuk memudahkan user memilih provinsi dan kota. namun alangkah baiknya apabila user memilih provinsi pilihan kota yang ditampilkan berdasarkan provinsi yang user pilih. ketika user memilih provinsi jawa tengah contohnya maka pada dropdown kota berisi hanya nama-nama kota yang berada di provinsi tersebut.

Pilih Provinsi

dropdown berantai codeigniter ( dropdown dependent list ) ajax

Pilih Kota berdasarkan Provinsi yang dipilih

Mungkin untuk penjelasan tentang apa itu dropdown dependent list saya cukupkan karena menurut saya sudah cukup mudah dipahami :) .lansung saja saya akan menjelaskan tentang bagaimana cara membuatnya.

yang pertama adalah buat 2 buah table yang berhubungan table provinsi dan table kota dimana pada table kota terdapat id_provinsi

create table provinsi (

id_provinsi int auto_increment, //PK

provinsi varchar(100),

);

create table kota(

id_kota int auto_increment, //PK

id_provinsi int,

kota varchar(100),

);

caranya adalah buat 2 buah dropdown yang mengambil data dari table provinsi dan table kota jika belum tau caranya BACA cara menampilkan dropdown dari database codeigniter. pada dropdown kota biarkan isinya kosong.

taruh kedua dropdown didalam <div> seberti berikut

<div id='provinsi>
// dropdown provinsi
</div>
</div id='div_kota'>
// dropdown kota
</div>

jika sudah membuat 2 buah dropdown pada dropdown pertama tambahkan fungsi onchange

<select name='provinsi' id='provinsi' onChange=javascript:set_city()>;

kemudian buat fungsi ajax seperti ini

Baca Juga membuat dynamic base url codeigniter

<script type='text/javascript' >
function set_city(){
var provinsi= $('#provinsi').val();
$.ajax({
type: 'POST',
data: "provinse="+provinsi,
url: 'controller/load_kota/',
success: function(result) {
$('#div_kota').html(result); }
});
}
</script>

pada model_kota buat fungsi get_kota_by_provinsi() seperti berikut

Baca juga Menampilkan hasil join table database codeigniter

public function get_kota_by_provinsi($id){
return $this->db->where("id_provinsi",$id,false)->get("kota");
}

pada controller buat fungsi load_kota seperti berikut

public function load_kota(){
$kota = $this->model_kota->get_kota_by_provinsi($this->response->post("provinsi"))->result();
echo"<p><select name='kota' id='kota'><option value='' disabled selected>Pilih Kota</option>";
foreach($kota as $City){
echo"<option value='".$City->city."'>".$City->city."</option>";
} echo"</select></p><script>initComboBox();</script>";
}

jika sudah silahkan ditest saya harap kode anda tidak error :D. jika artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)

BUDAYAKAN TINGGALKAN KOMENTAR YANG BAIK TERIMA KASIH :)