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">&nbsp;&nbsp;&nbsp;</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,function(k, v){ // loop hasil data yang ada
                   opt += "<option value=\""+ v.id +"\">"+ v.group +"</option>";
             });
            $("#jur").html(opt); // masukkan data tersebut pada combo pertama
       }
      ,error        : function(){
      alert('Gagal memuat Ajax.');
   }
});

Javascript diatas untuk menampilkan Combo box pertama atau Jurusan, ketika combo box pertama di pilih akan mengeksekusi javascript selanjutnya seperti dibawah

$("#jur").change(function(){
     var id = $(this).val();
    if(id != ""){
       loading();
         $.ajax({
                     url        : 'data.php?s=pel'
                    ,type        : 'post'
                    ,dataType    : 'json'
                    ,data        : ({id:id})
                    ,success    : function(data){
                    var opt;
                               
                   opt = "<option value=\"\">-</option>";
                   $.each(data,function(k, v){
                          opt += "<option value=\""+ v.id +"\">"+ v.pelajaran +"</option>";
                   });
                 $("#pelajaran").html(opt);
                 }
                ,error        : function(){
                alert('Gagal memuat Ajax.');
             }
       });
   }
});

pada script terakhir ini akan menampilkan data tiap2 jurusan yang telah dipilih oleh pengguna.

Sudah saya sediakan demo maupun file untuk didownload agar kalian bisa mempelajarinya dan modifikasi.

 

DEMO | DOWNLOAD