Sebenarnya bikin select on change ginian uda sering banget. Cuma agak rempong juga kalo setiap kali butuh kudu mikir lagi buat bikin. Nah, makanya sekarang tak simpen sini aja sebagai catetan saya pribadi dan mungkin bisa ada manfaatnya buat teman-teman.
Apa itu select on change based on another select?
Ini cuma istilah saya aja sih, intinya gini, misalnya temen-temen mempunyai dua tag select, misalnya fakultas dan prodi. Prodi kan datanya tergantung dari fakultas, jadi dengan menggunakan konsep ini, kita bisa mengatur hanya menampilkan data prodi berdasarkan fakultas yang uda kepilih di tag select option sebelumnya. Bisa dipahami?
Biar lebih mudah dipahami coba lihat gambar diatas, nah, pas dipilih pilihan fakultas MIPA, jadi prodi yang muncul di pilihan dibawahnya hanya prodi yang ada di fakultas MIPA.
Konsep semacam ini menarik, karena dengan demikian kita engga perlu melakukan load yang terlalu banyak sehingga meringankan beban query.
Selain prodi fakultas, masih banyak yang memanfaatkan konsep semacam ini. Misalnya bisa digunakan untuk pilihan Negara, Provinsi, Kota/Kabupaten, dan konsep-konsep hierarkis lainnya.
Script
Langsung aja, ini archive scriptnya. Oh iya, saya engga menyertakan controller nya, saya hanya menampilkan skrip JS yang dipakai. Jadi, nanti teman-teman silahkan menyesuaikan.
$(function(){
$.ajax( {
url:"/list_fakultas",
type:"GET",
success:function( data ) {
var fakList = data;
if ( typeof(data) == "string" ){
fakList = JSON.parse(data);
}
$.each( fakList, function( index, fak ){
$("#select_fakultas").append('<option value=' + fak.kode + '>' + fak.nama + '</option>');
});
},
error:function( result ) {
console.log(["error gagal mendapatkan data fakultas",result]);
}
});
$("#select_fakultas").change( function(){
$.ajax({ url : "/list_prodi",
data : {"fak_kode": $("#select_fakultas").val() },
type:'GET',
success:function( data ) {
var prodiList = data; // assuming list object
if ( typeof(data) == "string"){ // but if string
prodiList = JSON.parse( data );
}
$("#select_prodi").empty();
$.each(prodiList, function(index,prodi){
$("#select_prodi").append('<option value=' + prodi.kode + '>' + prodi.nama + '</option>');
});
},
error:function( result ){ console.log(["error", result]);
}
});
});
}); Dari script diatas, yang perlu teman-teman perhatikan, select_fakultas dan select_prodi merupakan id dari select option yang dipakai di htmlnya. Kemudian ada source ajax dua macem, untuk fakultas dan prodi. Setelah datanya di retrieve, kemudian di append ke option selectnya. Kira-kira sederhananya gitu sih.
Semoga bisa bermanfaat deh ya, kalo ada yang mau di obrolin, silahkan.
