Dynamic Select Box Menggunakan jQuery dan Ajax

Tutorial - 24 Oct 2013

Select box merupakan salah satu komponen yang paling sering digunakan dalam menampilkan data pada aplikasi web. Komponen ini biasanya sering dipakai untuk menampilkan data jenis kelamin, tempat/kota, tanggal dan lain sebagainya.

Dynamic Select Box Menggunakan jQuery dan Ajax

Pertanyaannya, apakah data select box bisa ditampilkan dengan hubungan antar select box ? Maksudnya jika Anda memilih satu data ‘induk’ select box kemudian tanpa melakukan refresh halaman web, data ‘anak’ akan ditampilkan pula baik pada komponen select box ataupun komponen lainnya. Secara tidak langsung proses menampilkan data ini akan berjalan secara dinamis.

Nah, pada tutorial ini kita akan belajar membuat sebuah aplikasi sederhana untuk menampilkan data dengan dyanamic select box menggunakan jQuery dan Ajax yaitu aplikasi untuk mengecek tarif pengiriman barang. Aplikasi ini, bisa Anda gunakan pada web sistem penjualan online/e-commerce sebagai salah satu fitur untuk memudahkan user. Sebelum melanjutkan silahkan lihat terlebih dahulu demo aplikasi dibawah ini.

Langkah 1 – Database

Pada aplikasi ini kita membutuhkan 4 tabel utama yaitu :

  • Tabel Provinsi (peng_provinsi) : tabel ini digunakan untuk menyimpan data provinsi
  • Tabel Kota (peng_kota) : tabel ini akan menyimpan data kota/kabupaten
  • Tabel Kurir (peng_kurir) : tabel ini untuk menyimpan data kurir/jasa ekspedisi pengiriman
  • Tabel Tarif (peng_tarif) : tabel ini untuk menyimpan data tarif pengiriman
Tabel dan Relasi Dynamic Select Box

Langkah 2 – Membuat Layout

Buatlah file index.php. File ini digunakan untuk menampilkan data select box. Dalam file ini juga disisipkan perintah jQuery Ajax untuk memproses dynamic select box.

index.php

<html>
<head>
<script language="javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
   $('#provinsi').change(function() { // Jika Select Box id provinsi dipilih
     var provinsi = $(this).val(); // Ciptakan variabel provinsi
     $.ajax({
            type: 'POST', // Metode pengiriman data menggunakan POST
          url: 'kota.php', // File yang akan memproses data
         data: 'nama_prov=' + provinsi, // Data yang akan dikirim ke file pemroses
         success: function(response) { // Jika berhasil
              $('#kota').html(response); // Berikan hasil ke id kota
            }
       });
    });



$(document).ready(function() {
    $('#kota').change(function() { // Jika select box id kota dipilih
     var kota = $(this).val(); // Ciptakan variabel kota
     $.ajax({
            type: 'POST', // Metode pengiriman data menggunakan POST
          url: 'kurir.php', // File pemroses data
           data: 'nama_kota=' + kota, // Data yang akan dikirim ke file pemroses
         success: function(response) { // Jika berhasil
              $('#kurir').html(response); // Berikan hasilnya ke id kurir
           }
       });
    });
  
$(document).ready(function() {
  $('#kurir').change(function() { // Jika select box id kurir dipilih
       var kurir = $(this).val(); // Ciptakan variabel kurir
       var kota = $('#kota').val(); // Ciptakan variabel kota
        $.ajax({
            type: 'POST', // Metode pengiriman data menggunakan POST
          url: 'tarif.php', // File pemroses data
           data: 'kurir=' + kurir + '&kota=' + kota, // Data yang akan dikirim ke file pemroses yaitu ada 2 data
           success: function(response) { // Jika berhasil
              $('#biaya').val(response); // Berikan hasilnya ke id biaya
            }
       });
    });
  });

});
});
</script>
</head>
<body>
<table>
<tr>
<td valign=top>Provinsi</td><td>
<select name="provinsi" id="provinsi" class="normal-select">
<option selected>- Pilih Provinsi -</option>
<?php $tampil=mysql_query("SELECT * FROM peng_provinsi ORDER BY prov_id ASC");
while($t=mysql_fetch_array($tampil)){
echo "<option value=’$t[prov_id]‘>$t[prov_nama]</option>";
}
?>
</select>
</td>
</tr>

<tr>
<td>Kota Tujuan</td>
<td><select name="kota" id="kota" class="normal-select">
<option selected>- Pilih Kota -</option>
</select>
</td>
</tr>

<tr>
<td valign=top>Jasa Pengiriman</td><td>
<select name="kurir" id="kurir" class="normal-select">
<option selected>- Pilih Jasa Pengiriman -</option>
</select>
</td>
</tr>

<tr>
<td>Biaya</td>
<td><input type="text" name="biaya" id="biaya" placeholder="Biaya" /></td>
</tr>
</table>
</body>
</html>

Langkah 3 – File Proses Data

Setelah membuat select box untuk menampilkan data beserta dengan perintah jQuery Ajax untuk melakukan proses select box tersebut, maka selanjutnya buatlah 3 file pemroses data seperti yang telah di tuliskan diperintah diatas yaitu file kota.php, kurir.php dan tarif.php.

kota.php

include(‘config.php’);

$tampil=mysql_query("SELECT * FROM peng_kota WHERE prov_id_fk=’$_POST[nama_prov]‘");
$jml=mysql_num_rows($tampil);
if($jml > 0){
echo"
<option selected>- Pilih Kota -</option>";
while($r=mysql_fetch_array($tampil)){
echo "<option value=$r[kota_id]>$r[kota_nama]</option>";
}else{
    echo "<option selected>- Data Wilayah Tidak Ada, Pilih Yang Lain -</option>";
}

kurir.php

include('config.php');

$tampil=mysql_query("SELECT peng_kurir.kurir_nama,peng_kurir.kurir_id FROM peng_tarif,peng_kurir,peng_kota WHERE peng_tarif.kota_id_fk='$_POST[nama_kota]' AND peng_tarif.kurir_id_fk=peng_kurir.kurir_id AND peng_tarif.kota_id_fk=peng_kota.kota_id");
$jml=mysql_num_rows($tampil);
if($jml > 0){
echo"
<option selected>- Pilih Jasa Pengiriman -</option>";
while($r=mysql_fetch_array($tampil)){
echo "<option value=$r[kurir_id]>$r[kurir_nama]</option>";
}
}else{
echo "
<option selected>- Jasa Pengiriman Belum Tersedia -</option>";
}

tarif.php

include('config.php');

$kurir = $_POST["kurir"];
$kota = $_POST["kota"];
$biaya = mysql_query("SELECT * FROM peng_tarif WHERE kurir_id_fk='$kurir' and kota_id_fk='$kota'");
while($data=mysql_fetch_array($biaya)){
echo "$data[tarif]";
}

Terakhir, jangan lupa untuk membuat file config.php untuk konfigurasi database. Serta inputlah beberapa data pada setiap tabelnya.

Kesimpulan

Dengan jQuery dan Ajax, data dapat dikirim secara dinamis ke server. Aplikasi ini nantinya bisa Anda gunakan sebagai fitur tambahan di web penjualan online. Terus berlatih dan semoga tutorial ini bermanfaat untuk Anda.

Baca juga :
Membuat Pencarian Facebook dengan jQuery dan PHP
Membuat Fitur Read More dengan PHP
Membuat Laporan Excel dengan PHP dan MySQL