There is 3 dropdown for country, state and district. I was doing when i select a country from country dropdown then state dropdown shows only adjacent to the country and when i select state then district dropdown shows only adjacent district to the state drop down.
My home.php code is
<?php
include "config.php";
?>
<html>
<head>
<script type="text/javascript">
function showstate(str){
if (str == "") {
document.getElementById("state").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("state").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "state.php?country=" + str, true);
xmlhttp.send();
}
function showcity(str2){
if (str2 == "") {
document.getElementById("city").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("city").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "district.php?state=" + str2, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form >
Choose your country : <select name="country" onchange="showstate(this.value)"> <option>Select country </option>
<?php
$query = "SELECT DISTINCT country FROM area";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
echo"<option value =".$row[0]."> ".$row[0]."</option>";
}
?>
</select>
State : <select id="state" name="state" onChange="showcity(this.value)"> <option>Select state</option> </select>
District : <select id="city" name="city"> <option>Select district </option> </select>
</form>
</body>
</html>
and state.php is
<?php
include "config.php";
echo " <option>Select state </option> " ;
if(isset( $_GET['country']) )
{
$country = $_GET['country'];
}
$query = "SELECT DISTINCT state FROM area WHERE country = '".$country."' ";
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result))
{
echo"<option value =".$row['state']."> ".$row['state']."</option>";
}
?>
And district.php is
<?php
include "config.php";
echo " <option>Select district </option> " ;
if(isset( $_GET['state']) )
{
$state = $_GET['state'];
}
$query = "SELECT DISTINCT district FROM area WHERE state = '".$state."' ";
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result))
{
echo"<option value =".$row['district']."> ".$row['district']."</option>";
}
?>
Everything is ok. But the problem is that using all three dropdown when i select any district, if again in the same page i m going to reselect country from the country dropdown then district does not remains changed.
On Change of country and just before calling ur ajax call to load states, 1st make district combo empty.