By using following code you can populate a drop-down list on
selection of item of the other one using Ajax. Both drop-down lists will be
dynamic.
Required javascript Functions
<script language="javascript"
type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http
object
var
xmlhttp=false;
try{
xmlhttp=new
XMLHttpRequest();}
catch(e) {
try{
xmlhttp=
new ActiveXObject("Microsoft.XMLHTTP");}
catch(e){
try{
xmlhttp
= new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return
xmlhttp;
}
// To populate
first dropdown(ex. state dropdown)
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);
}
}
// To populate second dropdown from first(ex. state dropdown)
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);
}
}
</script>
HTML Design:
<form method="post" action=""
name="form1">
<table width="60%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td
width="150">Country</td>
<td width="150"><select
name="country" onChange="getState(this.value)">
<option
value="">Select Country</option>
<option
value="1">USA</option>
<option
value="2">Canada</option>
</select></td>
</tr>
<tr
style="">
<td>State</td>
<td ><div
id="statediv"><select name="state" >
<option>Select
Country First</option>
</select></div></td>
</tr>
<tr
style="">
<td>City</td>
<td ><div
id="citydiv"><select name="city">
<option>Select
State First</option>
</select></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
Create a page findState.php
<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //change 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>
Create another page find City.php
<? $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', '');
//change 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>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<? } ?>
</select>
By this code you will get filled State drop-down list on page
load and city will populate on change of state. Above code is functional.
If you find any problem in applying this , please comment or write us at www.bel-technology.com .
