Dinamik Combobox Dengan Ajax

Disuatu saat, pasti kita pernah mendapati sebuah kondisi dimana ada filter bertingkat. Dimana sebuah combobox akan mempengaruhi data yang ada di combobox yang lain setelah combobox tersebut dipilih datanya. Untuk menyelesaikan masalah ini bisa menggunakan banyak cara. Salah satunya adalah combobox yang di pengaruhi tersebut akan diload dari server saat combobox yang mempengaruhi berganti value saat di pilih.

Pertama-tama siapkan lib javascript untuk kebutuhan ajax. Lib yang akan digunakan adalah jQuery Framework. Bisa di download di sini

1. Buat file html yang berisi 2 combobox. Untuk kali ini samplenya adalah kategori dan barang. Contoh kali ini di beri nama index.html

      <form name="input" action="">
         <table>
            <tr>
               <td align="center" width="5px"></td>
               <td>Kategori</td>
               <td>:</td>
               <td>
                  <select name="kategori" id="kategori" onChange="getComboBarang()">
                     <option value="0">Pilih Kategori</option>
                     <option value="1">Kategori 1</option>
                     <option value="2">Kategori 2</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td align="center" width="5px"></td>
               <td>Barang</td>
               <td>:</td>
               <td id="combo_barang">
                  <select name="barang">
                     <option>Pilih Barang</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td align="center" width="5px"></td>
               <td><input type="reset" value="Reset" name="Reset" id="Reset"></td>
               <td><input type="submit" value="Submit" name="Submit" id="Submit"></td>
            </tr>
         </table>
      </form>

Dan akan muncul tampilan seperti ini:

2. Tambahkan javascript di head documentnya. Dengan:

   

 <script type="text/javascript" src="jquery-1.7.2.js"></script>

Dan juga script ini:

<script>

         function getComboBarang(){

            $.get("file.php?opt1="+$("#kategori").val(), function(data){   

        $("#combo_barang").html(data);

     });

         }

</script>

3. Buat 1 buah file php untuk pengganti combobox ke 2. Untuk contoh kali ini di beri nama file.php:

<?php

#mengambil data dari parameter combo sebelumnya

   $a=$_GET['opt1'];

#membuat array data barang   

   $brg[1]['kode'][]="1";

   $brg[1]['kode'][]="2";

   $brg[1]['kode'][]="3";

   $brg[2]['kode'][]="4";

   $brg[2]['kode'][]="5";

   $brg[3]['kode'][]="6";

   $brg[3]['kode'][]="7";

   $brg[1]['nama'][]="Pensil";

   $brg[1]['nama'][]="Buku";

   $brg[1]['nama'][]="Penggaris";

   $brg[2]['nama'][]="Laptop";

   $brg[2]['nama'][]="HP";

   $brg[3]['nama'][]="Sepatu";

   $brg[3]['nama'][]="Tas";

#membuat tampilan combo barang

echo '<select name="barang" id="barang">';

#perulangan untuk membuat option

   for ($i = 0; $i < count($brg[$a]['kode']); $i++)

   {

      echo "<option value='".$brg[$a]['kode'][$i]."'>".$brg[$a]['nama'][$i]."</option>";

   }

echo '</select>';

?>

Dan apabila url php tersebut di akses maka yang akan muncul ditampilan hanya combobox saja seperti ini:

Dan sekarang tinggal di coba. Jika berhasil, maka combobox barang nilainya akan berganti apabila combobox kategori dipilih.

Untuk source contohnya bisa di download di sini

Tx to: smulfa@ymail.com / @smulfa untuk mau share ilmu ini.

Share this

Web App Id