यू इस मामले में अजाक्स के साथ काम करने की जरूरत है। पृष्ठ को रीफ्रेश किए बिना किसी भी ए कॉलम का चयन करने से आपको संबंधित बी कॉलम मान मिलेगा। उदाहरण के लिए
<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>
जैसा कि आप ऊपर देख सकते हैं, देश के ऑनचेज इवेंट में जावास्क्रिप्ट के गेटस्टेट () फ़ंक्शन को ड्रॉप डाउन कहा जाता है, जो स्टेट ड्रॉप डाउन के विकल्प मूल्यों को बदल देता है, आइए कोड को गेटस्टेट () फ़ंक्शन देखें।
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);
}
}
PHP फ़ाइल का कोड findState.php, जो अजाक्स से प्राप्त राज्य के ड्रॉप डाउन में विकल्पों को पॉप्युलेट करता है, नीचे दिया गया है
<? $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>
उपरोक्त राज्य ड्रॉपडाउन में, 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);
}
}
उपरोक्त AJAX फ़ंक्शन में, findcity.php को कॉल किया जाता है और यह PHP फ़ाइल शहर ड्रॉपडाउन को आपूर्ति किए गए पैरामीटर देश और राज्य से प्राप्त विधि के अनुसार पॉप्युलेट करती है। आइए अब 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>
और बस इतना ही, अजाक्स और पीएचपी का उपयोग करने वाले शहर, देश और राज्य की ट्रिपल ड्रॉप डाउन सूची पॉप्युलेट हो जाएगी।