Step One -Create a tables as follows
CREATE TABLE IF NOT EXISTS `cities` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`state_id` int(11) NOT NULL,
`city_name` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=24 ;
INSERT INTO `cities` (`id`, `state_id`, `city_name`) VALUES
(1, 1, ‘Nehru Place’),
(2, 1, ‘Mehrauli’),
(3, 1, ‘Govindpuri’),
(4, 1, ‘Janakpuri’),
(5, 2, ‘Patna’),
(6, 2, ‘Bhagalpur’),
(7, 2, ‘Munger’),
(8, 2, ‘Jamalpur’),
(9, 7, ‘Al Ghabah ‘),
(10, 7, ‘Al Ghabam’),
(11, 7, ‘ Al Ghashban’),
(12, 7, ‘Al Hamraniya ‘),
(13, 8, ‘Bam’),
(14, 8, ‘Shiraj’),
(15, 8, ‘Minab’),
(16, 11, ‘Adelanto’),
(17, 11, ‘Agoura Hills ‘),
(18, 11, ‘Angels Camp’),
(19, 11, ‘Apple Valley ‘),
(20, 12, ‘Alachua’),
(21, 12, ‘Astatula’),
(22, 12, ‘Bascom’),
(23, 12, ‘Belle Glade’);
CREATE TABLE IF NOT EXISTS `countries` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
INSERT INTO `countries` (`id`, `country_name`) VALUES
(1, ‘India ‘),
(2, ‘UAE’),
(3, ‘USA’);
CREATE TABLE IF NOT EXISTS `states` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_id` int(11) NOT NULL,
`state_name` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
INSERT INTO `states` (`id`, `country_id`, `state_name`) VALUES
(1, 1, ‘Delhi’),
(2, 1, ‘Bihar’),
(7, 2, ‘Dubai’),
(8, 2, ‘Sharjah’),
(11, 3, ‘Calofornia’),
(12, 3, ‘Florida’);
Step-Two Create a connection file as follows
<?php
$con=mysql_connect(‘localhost’,’root’,”);
mysql_select_db(‘test’,$con);
$query=mysql_query(“SELECT * FROM countries”);
while($row=mysql_fetch_assoc($query))
{
$countries[]=$row;
}
?>
Step Three-Include a javascript library to make AJAX work
Step Four-Create a main file to be run from browser as follows
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
<html>
<head>
<script type=”text/javascript” src=”jquery-1.8.0.min.js”></script>
<?php
include(‘
connection.php’);
?>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Drop Down</title>
</head>
<body>
<form name=”dropdown” action=”” method=”post”>
<table align=”center”>
<tr>
<td>Select Country</td>
<td><select name=”country” onChange=”getState(this.value);” id=”country”>
<option value=””>–Select–</option>
<?php
foreach($countries as $country){ ?>
<option value=”<?php echo $country['id'] ;?>”><?php echo $country['country_name'] ;?></option>
<?php }?>
</select></td>
</tr>
<tr>
<td>Select State</td>
<td><select name=”state” onChange=”getCity(this.value);” id=”state”>
<option value=””>–Select–</option>
</select></td>
</tr>
<tr>
<td>Select City</td>
<td><select name=”city” id=”city”>
<option value=””>–Select–</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>
<script type=”text/javascript”>
function getState(id)
{
if(id==”)
{
$(‘#state’).html(‘<option value=””>–Select–</option>’);
$(‘#city’).html(‘<option value=””>–Select–</option>’);
$(‘#state’).prop(‘disabled’,true);
$(‘#city’).prop(‘disabled’,true);
return
}
if(id!=”)
{
$(‘#city’).html(‘<option value=””>–Select–</option>’);
}
$.post(‘
ajax_backend.php’, {act:’getState’,’Id’:id},function(data){
if(data != ” && data != ‘error’){
$(‘#state’).html(data);
$(‘#state’).prop(‘disabled’,false);
}
});
}
function getCity(id)
{
if(id==”)
{
$(‘#city’).html(‘<option value=””>–Select–</option>’);
$(‘#city’).prop(‘disabled’,true);
return
}
$.post(‘
ajax_backend.php’, {act:’getCity’,’Id’:id},function(data){
if(data != ” && data != ‘error’){
$(‘#city’).html(data);
$(‘#city’).prop(‘disabled’,false);
}
});
}
$().ready(function(){
$(‘#state’).prop(‘disabled’,true);
$(‘#city’).prop(‘disabled’,true);
});
</script>
Step Five-Create a
ajax_backend.php for communicating with AJAX
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” >
<html >
<head>
<?php
include(‘
connection.php’);
$action =”;
if(isset($_REQUEST['act']) && $_REQUEST['act'] != ”){
$action = $_REQUEST['act'];
}
if($action == ‘getState’){
$country_id = ”;
if(isset($_POST['Id'])){
$country_id = $_POST['Id'];
}
$data = “<option value=”>–Select–</option>”;
if($country_id == ” || $country_id == 0){
echo $data; exit;
}
$state_list = getState($country_id);
if(!empty($state_list)){
foreach($state_list as $state){
$data .= “<option value=’”.$state['id'].”‘>”.$state['state_name'].”</option>”;
}
}
echo $data; exit;
}
if($action == ‘getCity’){
$city_id = ”;
if(isset($_POST['Id'])){
$city_id = $_POST['Id'];
}
$data = “<option value=”>–Select–</option>”;
if($city_id == ” || $city_id == 0){
echo $data; exit;
}
$city_list = getCity($city_id);
if(!empty($city_list)){
foreach($city_list as $city){
$data .= “<option value=’”.$city['id'].”‘>”.$city['city_name'].”</option>”;
}
}
echo $data; exit;
}
function getState($country_id){
$sql = “SELECT * FROM states WHERE country_id = ‘”.$country_id.”‘ ORDER BY state_name”;
$rs = mysql_query($sql) or die(mysql_error());
$data = array();
if(mysql_num_rows($rs) > 0){
while($row = mysql_fetch_assoc($rs)){
$data[] = $row;
}
}
return $data;
}
function getCity($state_id){
$sql = “SELECT * FROM cities WHERE state_id = ‘”.$state_id.”‘ ORDER BY city_name”;
$rs = mysql_query($sql) or die(mysql_error());
$data = array();
if(mysql_num_rows($rs) > 0){
while($row = mysql_fetch_assoc($rs)){
$data[] = $row;
}
}
return $data;
}
?>
