Combo box dinamis ajax Ronde-2
Sehubungan banyaknya tanggapan artikel combo-box dinamis dengan ajax , mengenai bagaimana cara untuk membuat combo lebih dari dua, pada artikel kesempatan kali ini akan saya coba share untuk membuat nya , tentunya dengan contoh file yang masih berhubungan dengan artikel pertama.
ada beberapa perubahan pada script maupun struktur database dari artikel yang yaitu :
untuk database , ada tambahan tabel rw dengan struktur sbb
namanya contoh, tentu saja tidak seluruh data rw disemua kelurahan saya isi, kecuali anda bersedia menyediakan kopi hangat untuk saya (ngarep.com) 
disini hanya ada 3 kelurahan yang saya isi data RW nya yaitu kelurahan id 1,2 & 3 saja
untuk file ajax.js ada perubahan coba perhatikan di akhir-akhir baris source code
// JavaScript Document
//membuat object Microsoft.XMLHTTP untuk IE atau
//membuat object XMLHttpRequest untuk selain IE
var xmlHttp = buatObjekXmlHttp();
function buatObjekXmlHttp()
{
var obj = null;
if (window.ActiveXObject)
obj = new ActiveXObject ("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
//cek isi xmlHttp
if (obj == null)
document.write("Browser tidak mendukung ajax");
return obj;
}
function ambilData (sumber_data, id_elemen)
{
if (xmlHttp != null) //jika object xmlHttp sudah terbentuk
{
var obj = document.getElementById(id_elemen); //memasukkan nilai id_elemen ke dalam object var
xmlHttp.open("GET", sumber_data);//untuk menyiapkan permintaan ke server metodenya ada dua GET dan POST, sumber_data-> URL
xmlHttp.onreadystatechange = function () //status server
{
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
obj.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null); //untuk mengirim permintaan ke server
}
}
untuk file form_combo.php ada tambahan fungsi prosesData2, fungsi inilah yang nantinya akan memproses combo yang pertama
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Mudah Nya Ajax</title>
<script type="text/javascript" src="ajax.js"></script> <!-- include script pembuat ajax -->
<!-- Mulai Ajax Script ====================================================================== -->
<script type="text/javascript">
function prosesData(sumber_data, id_elemen)
{
var kecamatan = document.getElementById("kecamatan");
var elemen_kecamatan = kecamatan[kecamatan.selectedIndex];
var nilai_kecamatan = elemen_kecamatan.value;
var url= sumber_data + "?kecamatan=" + nilai_kecamatan;
ambilData(url,id_elemen);
}
//fungsi yang baru
function prosesData2(sumber_data, id_elemen)
{
var kelurahan = document.getElementById("kelurahan");
var elemen_kelurahan = kelurahan[kelurahan.selectedIndex];
var nilai_kelurahan = elemen_kelurahan.value;
var url= "proses_ajax2.php?kelurahan=" + nilai_kelurahan;
ambilData(url,"id_info2");
}
</script>
<!-- AkhirAjax Script ====================================================================== -->
</head>
<body>
<?
include "koneksi.php";//panggil fungsi koneksi
include "fungsi_combo.php"; //panggil fungsi combo
?>
<form method="post">
<table border="0" width="50%">
<tbody>
<tr>
<td width="51%">Kecamatan</td>
<td width="49%"><!-- inti dari proses ajax --></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Kelurahan</td>
<td>
<div id="id_info"><!-- didalam div ini ajax akan ditampilkan -->
Disini Akan Tampil Combo kelurahan</div></td>
</tr>
<tr>
<td>RW</td>
<td>
<div id="id_info2">
<!-- didalam div ini ajax akan ditampilkan --></div></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</form>
lalu, pada file proses_ajax.php ada tambahan fungsi prosesData2 pada event Onchange pada select kelurahan
header("Cache-Control: no-cache, must-revalidates"); //untuk menghapus chace
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); //pilih tanggal yang sudah expired
include "koneksi.php";
$id_kecamatan = $_GET[kecamatan]; //variable yang dikirimkan oleh ajax
$sql = mysql_query("SELECT * FROM kelurahan WHERE id_kecamatan = '$id_kecamatan' ");
//ada tambahan event onChange berupa fungsi prosesData2
echo "
$r[nama_kelurahan]
";
//echo "$id_kecamatan";
kemudian ada tambahan file baru -> proses_ajax2.php
file ini gunanya untuk meng query data rw dari id kelurahan yg terpilih
header("Cache-Control: no-cache, must-revalidates"); //untuk menghapus chace
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); //pilih tanggal yang sudah expired
include "koneksi.php";
$id_kelurahan = $_GET[kelurahan]; //variable yang dikirimkan oleh ajax
$sql = mysql_query("SELECT * FROM rw WHERE id_kelurahan = '$id_kelurahan' ");
echo "
$r[nama_rw]
";
//echo "$id_kelurahan";
dan untuk file-file yang tidak saya sebut, tentunya masih sama dibutuhkannya seperti pada artikel ronde pertama
kalau anda suka dengan artikel ini jangan sungkan-sungkan untuk me rate dan meninggalkan komentar.
#Freehdr
tolong mas ada demonya gag yang ini, coz ane ubek2 gag jalan, n gag nemu solusinya..
psn erronya gmn gan? gak jln nya gmn? bs lbh spesifik