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



  • Ricky Adithya

    kk punya saya tidak mau tampil yang untuk select yang kedua.

    • Pstikan plugin jQuery-nya sdh di sisipkan. Jga cba lhat kmbali ‘id’ setiap select box-nya sudh sesuai atau blm.

      • Ricky Adithya

        udah bener semua gan.
        saya coba ganti method ke GET di file proses,berhasil keluar.

  • Mahdi Ku

    master, mau tanya, saya newbie, arti dari tarif.php apa ya tolong di jelaskan

    $kurir = $_POST[“kurir”]; ==> ini maksudnya apa?
    $kota = $_POST[“kota”]; ==> ini maksudnya apa?
    $biaya = mysql_query(“SELECT * FROM nilai WHERE idketfk=’$kurir’ and idjumfk=’$kota'”); ====> ini maksudnya apa?
    while($data=mysql_fetch_array($biaya)){
    echo “$data[tarif]”;==> ini maksudnya apa?

    saya udah berhasil mencoba yg laen tapi untuk biayanya tidak keluar
    mohon penjelasannya
    terimakasih banyak

    • file tarif.php digunakan untuk menampilkan data tarif berdasarkan kota dan jenis kurir yg dipilih.

      $kurir = $_POST[“kurir”]; –> ini dgunakan untuk menampung id kurir dari select box pilih kurir (jasa pengiriman)
      $kota = $_POST[“kota”]; –> ini dgunakan untuk menampung id kota yg ddpilih di select box kota

      $biaya = mysql_query(“SELECT * FROM nilai WHERE idketfk=’$kurir’ and idjumfk=’$kota'”); –> prnth ini menjalankan query mysql untuk mnmpilkan data tarif, agan salah menuliskan prnth mysqlnya dsini yg benar sprti pada tutorial atau file download. Makanya data tarif tdk mau nampil

      echo “$data[tarif]”; –> ini kan untuk menampilkan tarif.

      Klu msh kesulitan, cba didownload file cnth yg sdh dsediakan. Smg bermanfaat.

  • tutorialnya keren…
    ini yang saya cari…
    ada tutorial, ada demo…
    terima kasih banyak ilmunya…
    semoga bermanfaat untuk semua…

    • trm ksh sdh brkunjung agan Iqfar.

  • Mohammad Januar Hilman

    ajiib, yg dcari2 ktemu jg dsini..
    izin sedoot yah gan..

    moga ilmunya nambah truz ..
    mangstaap.. 😀

  • Sulaidi Hasibuan

    saya punya dua buah select menu :

    Sabun
    Gula
    Rokok

    Rp 2.500
    Rp 5.000
    Rp 10.000

    Bagaimana
    caranya saat kita pilih salah satu item di select menu pertama maka
    select menu (harga) otomatis berganti? terima kasih om

    • Mas tinggal menyesuaikan querynya dgn susunan tabel yg mas gunakan. Step by step tidak berbeda seperti diatas.

  • Ma Dhan

    bisa minta source code nya link downloadnya bermasalah

    • Linknya tdk ada mslah mas Ma Dhan, pastikan koneksi Anda baik. Silakan download di URL ini http://www.mediafire.com/download/2dcp7cw95wj8o8d/dynamic-select-box.rar

      • Ma Dhan

        terima kasih, maaf tadi saya download via android file rarnya yang bermasalah.
        terima kasih banyak atas responnya yang cepat.

        • Sama2 Mas Ma Dhan. Update terus info dari kami baik via medsos atau subscribe 🙂

      • Ma Dhan

        Iya terima kasih informasinya

  • ilham maulana

    Keren gan

  • Jati Murti

    kalau id:biaya dipindah atau menyimpan ke variabel php bisa gak yaa?

    • Maksudnya gmna yah ?
      Boleh diperjelas gan, hehe

      • Jati Murti

        itu kan gini
        kalau semisal keluarannya jadi $biaya (misal) gt aja bisa gak?
        kalau bisa gimana yaa?

        • Bisa aja gan. Misal begini $biaya = $_POST[“biaya”];.

          • Jati Murti

            iya aku udh begitu kmrn tapi kok tetap gak muncul ya gan?
            $biaya = $_POST[“biaya”];

            Total Biaya Kirim (Rp) :

          • Jati Murti

            gak bisa gan???