Membuat Chained Combobox dengan jQuery Ajax PHP

Karena sudah lumayan lama tidak memposting, pada siang hari ini saya kana memposting tentang Membuat Chained Combobox dengan jQuery Ajax PHP, yang dimaksud dengan chained combobox ialah combobox yang saling berkaitan antara 1 dengan yang lainnya, misalnya saja jika anda pernah melihat sebuah website disitu ada 2 buah combobox, combobox pertama untuk memilih provinsi, combobox ke 2 untuk memilih kota, ketika kita memilih salah satu provinsi pada combobox yang ada di provinsi maka pada combobox ke 2 akan muncul kota - kota yang ada di provinsi yang kita pilih tersebut.

Langkah - langkah Membuat Chained Combobox dengan jQuery Ajax PHP

1. Buat sebuah folder pada C:\xampp\htdocs dengan nama chained-combobox

2. Buat database dengan nama latihan, lalu buat 2 buah table dengan nama kategori dan sub_kategori

CREATE TABLE kategori (
kd_kategori int (2) primary key auto_increment,
kategori varchar(20)
)

CREATE TABLE sub_kategori (
kd_subkategori int (2) primary key auto_increment,
kd_kategori int (2),
kategori varchar(20)
)

Isikan data pada table kategori dan subkategori sesuai dengan keinginan anda

3. Buat sebuah file php pada folder chained-combobox dengan nama koneksi.php

<?php
$server="localhost";
$username="root"; // username mysql
$password="root"; // password mysql
$db="latihan"; // nama database
$koneksi=mysql_connect($server,$username,$password) or die ("Gagal terkoneksi ke server");
$database=mysql_select_db($db) or die ("Database tidak ditemukan");
?>

4. Buat sebuah file php pada folder chained-combobox dengan nama getsubkategori.php

<?php
include "koneksi.php";
$id=$_POST['id'];
$query=mysql_query("select * from sub_kategori where kd_kategori='".$id."'");

$row=mysql_num_rows($query);
if ($row > 0)
{
 while ($data=mysql_fetch_array($query))
 {
  echo "<option value=".$data["kd_subkategori"].">".$data["subkategori"]."</option>";
 }
}
?>

5. Buat sebuah file php pada folder chained-combobox dengan nama index.php

<?php include"koneksi.php";?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Chained Combobox jQuery Ajax PHP</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <!-- include file jquery.min.js -->
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
 <!-- handle event combobox kategori ketika nilainya di ganti -->
 $("#combokategori").change(function() {
  <!-- mendapatkan value dari combobox -->
  var idkategori = $(this).val();
  if (idkategori != "")
  {
   <!-- Request data sub kategori berdasarkan idkategori yang dipilih -->
   $.ajax({
    type:"post",
    url:"getsubkategori.php",
    data:"id="+ idkategori,
    success: function(data){
     $("#subkategori").html(data);
    }
   });
  }
 });
});
</script>

Pilih Kategori
<br>
<!-- combobox kategori -->
<select name="kategori" id="combokategori">
 <option value="">Pilih kategori</option>
<?php
$query=mysql_query("select * from kategori");
while ($data=mysql_fetch_array($query))
{
?>
<option value="<?php echo $data['kd_kategori'];?>"><?php echo $data['kategori'];?></option>
<?php }?>
</select>
<br>
Pilih Subkategori
<br>
<!-- combobox untuk subkategori -->
<select name="subkategori" id="subkategori">
 <option selected="selected">Pilih subkategori</option>
</select>
</body>
</html>

6. Buka browser dan buka http://localhost/chained-combobox/