Pada artikel kali ini kita coba belajar membuat Combo box [Drop down] secara dinamis dengan menggunakan jquery, saya buat artkel ini untuk menjawab pertanyaan tentang hal serupa dari seorang teman.
Kalian buat dulu 1 file php misal dengan nama data.php :
switch($_GET[‘s’]){ // Parameter get
case ‘pel’: // Bila Parameter Get berisi pel
$arr = array(
array(“id” => “1”, “group” => “1”, “pelajaran” => “Biologi”)
,array(“id” => “2”, “group” => “1”, “pelajaran” => “Fisika”)
,array(“id” => “3”, “group” => “1”, “pelajaran” => “Matematika”)
,array(“id” => “4”, “group” => “1”, “pelajaran” => “Geografi”)
,array(“id” => “5”, “group” => “1”, “pelajaran” => “Kimia”)
,array(“id” => “6”, “group” => “2”, “pelajaran” => “Akuntansi”)
,array(“id” => “7”, “group” => “2”, “pelajaran” => “Administrasi”)
,array(“id” => “8”, “group” => “2”, “pelajaran” => “Ekonomi”)
,array(“id” => “9”, “group” => “2”, “pelajaran” => “Sosiologi”)
,array(“id” => “10”, “group” => “2”, “pelajaran” => “Sejarah”)
,array(“id” => “11”, “group” => “3”, “pelajaran” => “Bahasa Insonesia”)
,array(“id” => “12”, “group” => “3”, “pelajaran” => “Bahasa Inggris”)
,array(“id” => “13”, “group” => “3”, “pelajaran” => “Bahasa Jepang”)
);
foreach($arr as $key => $val){
if($val[‘group’] == $_POST[‘id’]){
$res[] = $val;
}
}
$data = $res;
break;
default:
$data = array(
array(“id” => “1”, “group” => “IPA”)
,array(“id” => “2”, “group” => “IPS”)
,array(“id” => “3”, “group” => “BAHASA”)
);
break;
}echo json_encode($data);
Pada artikel kali ini data tidak terkoneksi dengan database melainkan hanya berupa Array [Toh Output yang dihasilkan juga sama]
kalian buat 2 buat Combo box seperti dibawah
<div class=”form_row”>
<label class=”name”>
Jurusan :
</label>
<select id=”jur” name=”jur”>
<option value=””>-</option>
</select>
</div>
<div class=”form_row”>
<label class=”name”>
Mata Pelajaran :
</label>
<select id=”pelajaran” name=”pelajaran”>
<option value=””>-</option>
</select>
<span id=”loading”> </span>
</div>
tentu saja ketika kalian lihat di browser kedua combo box tidak mempunyai data, untuk menampilkan data kalian buat javascript seperti dibawah
$.ajax({
url : ‘data.php’
,type : ‘get’
,dataType : ‘json’
,success : function(data){
var opt;
opt = “<option value=”””>-</option>””;
$.each(data