Combo box dinamis [jQuery]

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