Membuat Select Box Dengan Jquery dan php

Dalam postingan kali ini saya masih membahas tentang ajax dengan jquery. untuk memudahkan dalam memahami postingan saya ini, mungkin ada lebih baiknya temen-temen bisa membaca postingan saya sebelumnya di bawah ini nih.

Baca : Apa Sih itu Ajax? terus Jquery?

Baca : Membuat Select Box Bertingkat Dengan Jquery (Tanpa Ajax)

Ok jadi studi kasus yang saya tulis dalam postingan kali ini adalah select box dalam php dengan menggunakan event change pada jquery. Untuk informasi saja, event change tidak hanya bisa digunakan pada select box saja, melainkan di radio, checkbox, dan lain-lain, temen-temen bisa cari di inet tutornya banyak banget.

Mungkin teman-teman tanpa disadari sudah pernah menemui kasus select box ini. Contohnya, pada select box untuk Provinsi -> Kabupaten->kecamatan .. dimana ketika kita memilih provinsi, maka list dari select kabupaten akan diupdate, begitupun kecamatan. Ingat ketika kita memilih Provinsi itu ga ada proses reload page, yang mana ajax lah yang melakukannya.

Ok, langsung saja:

pertama buat dulu buat satu database dan tiga tabel didalamnya.

database : db_data_ajax

tabel : data_provinsi,data_kabupaten,data_kecamatan

kemudian masukkan beberapa data ke dalam database, atau temen-temen nanti bisa download pada akhir postingan ini.

Berikut adalah list tabelnya (cara pembuatan db dan tabelnya saya ga perlihatkan ya, karena cara setiap orang mungkin berbeda-beda...heheheh)

Setelah persiapan databasenya sudah siap, selanjutnya mari kita buat file php nya.. saya disini asumsikan temen-temen sudah paham ya load file jquery dan tata cara penulisannya, kalau belum paham bisa baca postingan dibawah ini ya temen-temen atau nanti bisa download filenya :

Baca : Belajar jQuery Ternya Tidak Sudah, Gampang Banget

Berikut list file php yang dibuat

file koneksi.php, untuk koneksi ke database

<?php
 $database = 'db_data_ajax'; //nama database
 $user = 'root'; //nama user db
 $pass = ''; //pass db
 $host = 'localhost:3307'; //host db, sesuaikan dengan settingan di komputer masing2.

 $conn = mysqli_connect($host,$user,$pass,$database);

 if (!$conn) {
     die("Connection failed: " . mysqli_connect_error());
 }

?>

file index.php, untuk file pertama yang akan di akses

1. script html

<?php
 //includkan filekoneksi yang sudah dibuat
 include"koneksi.php"; 

  //eksekusi query untuk menampilkan data provinsi
  $sql = "select * from data_provinsi";
  $result = mysqli_query($conn,$sql); 
 ?> 

  <select id="s_provinsi">
   <option value="">-- Pilih Provinsi --</option>
   <?php
   //tampilkan data provinsi pada select provinsi
   while($row=mysqli_fetch_assoc($result)){
    echo"<option value=".$row['id_provinsi'].">".$row['nama_provinsi']."</option>";
   }
   ?> 
  </select>
         =>

         <!-- buat inisialisai select kabupaten yang masih kosong --> 
  <select id="s_kabupaten">
   <option value="">-- Pilih Kabupaten --</option>
  </select>
   => 

   <!-- buat inisialisai select kecamatan yang masih kosong --> 
  <select id="s_kecamatan">
   <option value="">-- Pilih Kecamatan --</option>
  </select>

2.script jquery

$(document).ready(function(){
    
    // gunakan event jQuery change  
    $('#s_provinsi').change(function(){
     var id_provinsi = $(this).val(); //dapatkan id provinsi yang dipilih
     $.ajax({ //panggil ajax
      type : 'POST', //tipe yang digunakan adalah post
      url : 'data_ajax_kabupaten.php', //alamat / file tempat eksekusi ajax
      data : 'id_provinsi='+id_provinsi, //data yang dikirim pada url
      success:function(response) { //hasil eksekusi disimpan pada variabel response
       $('#s_kabupaten').html(response); //tampilkan response pada select kabupaten
      }
     });


    });

    //penjelasannya hampir sama dengan diatas, hanya beda di nama variabel dan id
    $('#s_kabupaten').change(function(){
     var id_kabupaten = $(this).val();
     $.ajax({
      type : 'POST',
      url : 'data_ajax_kecamatan.php',
      data : 'id_kabupaten='+id_kabupaten,
      success:function(response) {
       $('#s_kecamatan').html(response);
      }
     });
    });

   });

file data_ajax_kabupaten.php, untuk menampilkan data kabupaten berdasarkan provinsi yang dipilih

<?php
 include"koneksi.php";

 $id_provinsi = $_POST['id_provinsi']; //id_provinsi yang dikirim melalui ajax

 echo"<option value=''>-- Pilih Kabupaten --</option>";

 if($id_provinsi!='') { 

  $sql="select * from data_kabupaten where id_provinsi=".$id_provinsi;
  $result = mysqli_query($conn,$sql);
  while($row=mysqli_fetch_assoc($result)){
   echo"<option value=".$row['id_kabupaten'].">".$row['nama_kabupaten']."</option>";
  }
 } 
?>

Terakhir file data_ajax_kecamatan.php, untuk menampilkan data kecamatan berdasarkan kabupaten yang dipilih

<?php
 include"koneksi.php";

 $id_kabupaten = $_POST['id_kabupaten']; //id_kabupaten yang dikirim melalui ajax

 echo"<option value=''>-- Pilih Kecamatan --</option>";

 if($id_kabupaten!='') {

  $sql="select * from data_kecamatan where id_kabupaten=".$id_kabupaten;
  $result = mysqli_query($conn,$sql);
  while($row=mysqli_fetch_assoc($result)){
   echo"<option value=".$row['id_kecamatan'].">".$row['nama_kecamatan']."</option>";
  }
 } 
?>

Setelah semuanya sudah dibuat, maka tinggal panggil dari browser. Ingat karena kita menggunakan database dan file PHP maka pastikan temen-temen menyimpan file yang sudah dibuat tadi di server ya atau biasanya htdocs kalau yang pake XAMPP atau WAMP. Berikut tampilannya :