Anda perlu Bekerja dengan Ajax Dalam Kasus ini. Tanpa Menyegarkan Halaman Memilih salah satu kolom A akan memberi Anda Nilai kolom B yang sesuai. Misalnya
<form method="post" name="form1">
<table border="0" cellpadding="0" cellspacing="0" width="60%"><tbody>
<tr>
<td width="150">Country</td>
<td width="150"><select style="background-color: #ffffa0" name="country" onchange="getState(this.value)"><option>Select Country</option><option value="1">USA</option><option value="2">Canada</option> </select></td>
</tr>
<tr>
<td>State</td>
<td>
<p id="statediv">
<select style="background-color: #ffffa0" name="state"><option>Select Country First</option> </select></td>
</tr>
<tr>
<td>City</td>
<td>
<p id="citydiv">
<select style="background-color: #ffffa0" name="city"><option>Select State First</option> </select></td>
</tr>
</tbody></table>
</form>
Seperti yang Anda lihat di atas, dalam acara onChage negara drop down getState() fungsi javascript dipanggil yang mengubah nilai opsi drop down State, mari kita lihat kode fungsi getState().
function getState(countryId)
{
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
Kode file PHP findState.php, yang mengisi opsi di drop-down status yang diambil dari Ajax , diberikan di bawah
<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);
?>
<select name="state" onchange="getCity(<?=$country?>,this.value)">
<option>Select State</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['id']?>><?=$row['statename']?></option>
<? } ?>
</select>
Pada dropdown state di atas, fungsi getCity() dipanggil dalam event onChage dengan parameter countryId dan stateId, sekarang mari kita lihat kode fungsi getCity()
function getCity(countryId,stateId)
{
var strURL="findCity.php?country="+countryId+"&state="+stateId;
var req = getXMLHTTP();
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4) // only if "OK"
{
if (req.status == 200)
{
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
Dalam fungsi ajax di atas, findcity.php dipanggil dan file PHP ini mengisi dropdown kota sesuai dengan parameter negara dan status yang disediakan dari metode get. Sekarang mari kita lihat kode findcity.php,
<?php $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);
?>
<select name="city">
<option>Select City</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<?php } ?>
</select>
Dan itu saja, daftar drop-down tiga kota, negara, dan negara bagian menggunakan Ajax dan PHP akan diisi.