Country State City Dropdown in PHP

PHP Tutorials By vineet Kumar Saini

www.vineetsaini.wordpress.com

Country State City in Dropdown list in PHP using Ajax

First of all we create a database then we will create three tables in databse i.e. country ,

state and city table. Like as following images.

Country Table

CREATE TABLE `country` (

`Country_Id` varchar(255) NOT NULL,

`CountryName` varchar(255) NOT NULL

);

INSERT INTO `country` (`Country_Id`, `CountryName`) VALUES

('1', 'India'),

('2', 'Usa'),

('3', 'Canada');

State Table

CREATE TABLE `state` (

`StateId` varchar(255) NOT NULL,

`Country_Id` int(11) NOT NULL,

`StateName` varchar(255) NOT NULL

);

INSERT INTO `state` (`StateId`, `Country_Id`, `StateName`) VALUES

('1', 1, 'Orissa'),

('2', 1, 'Andhra Pradesh'),

('3', 1, 'West Bengal'),

('4', 1, 'Maharastra'),

('5', 2, 'Arizona'),

('6', 2, 'California'),

('7', 2, 'Texas'),

('8', 3, 'Alberta'),

('9', 3, 'Ontario');



City Table

CREATE TABLE `city` (

`CityId` varchar(255) NOT NULL,

`State_Id` int(11) NOT NULL,

`CityName` varchar(255) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `city` (`CityId`, `State_Id`, `CityName`) VALUES

('1', 1, 'Bhubaneswar'),

('2', 2, 'Hyderbad'),

('3', 3, 'Kolkata'),

('4', 4, 'Mumbai'),

('5', 5, 'Calgary'),

('6', 5, 'Edmonton'),

('7', 5, 'Duffield'),

('8', 6, 'Phoenix'),

('9', 7, 'San Diego'),

('10', 8, 'Austin'),

('11', 9, 'Toronto');



Now we will create configuration file in php i.e. config.php. I which file we will create the

database connectivity.

config.php file

<?php

$host="localhost";

$username="root";

$password="";

$dbname="country_dropdown";

$con=mysql_connect("$host","$username","$password");

mysql_select_db("$dbname",$con);

?>

Now we will create index.php

Index.php

<?php

include('config.php');

$Country_query="select id,country_name from country order by country_name asc ";

$Country=mysql_query($Country_query);

$Count_Country=mysql_num_rows($Country);

?>

<html>

<head>

<title>Country State City Drop Down Using Ajax in PHP</title>

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

<script type="text/javascript">

function selectCity(country_id){

if(country_id!="-1"){

loadData('state',country_id);

$("#city_dropdown").html("<option value='-1'>Select city</option>");

}else{

$("#state_dropdown").html("<option value='-1'>Select state</option>");

$("#city_dropdown").html("<option value='-1'>Select city</option>");

}

}

function selectState(state_id){

if(state_id!="-1"){

loadData('city',state_id);

}else{

$("#city_dropdown").html("<option value='-1'>Select city</option>")

}

}

function loadData(loadType,loadId){

var dataString = 'loadType='+ loadType +'&loadId='+ loadId;

$.ajax({



type: "POST",

url: "loadData.php",

data: dataString,

cache: false,

success: function(result){

$("#"+loadType+"_loader").hide();

$("#"+loadType+"_dropdown").html("<option value='-1'>Select

+loadType+"</option>");

$("#"+loadType+"_dropdown").append(result);

}

});

}

</script>

</head>

<body>

<?php

if($Count_Country > 0){

?>

<table>

<tr>

<td>Country:</td>

<td>

<select onchange="selectCity(this.options[this.selectedIndex].value)">

<option value="-1">Select country</option>

<?php

while($rowCountry=mysql_fetch_array($Country)){

?>

<option value="<?php echo $rowCountry['id']?>"><?php echo

$rowCountry['country_name']?></option>

<?php

}

?>

</select>

</td>

</tr>

<tr>

<td>State:</td>

<td>

<select id="state_dropdown"

onchange="selectState(this.options[this.selectedIndex].value)">

<option value="-1">Select state</option>

</select><span id="state_loader"></span>

</td>

</tr>

<tr>

<td>City:</td>

<td>

<select id="city_dropdown">



<option value="-1">Select city</option>

</select><span id="city_loader"></span>

</td>

</tr>

</table>

<?php

}else{

echo 'No Country Name Found';

}

?>

</body>

</html>

load_state_city.php

<?php

include('config.php');

$loadType=$_POST['loadType'];

$loadId=$_POST['loadId'];

if($loadType=="state"){

$sql="select id,state_name from state where country_id='".$loadId."' order by

state_name asc";

}else{

$sql="select id,city_name from city where state_id='".$loadId."' order by

city_name asc";

}

$res=mysql_query($sql);

$check=mysql_num_rows($res);

if($check > 0){

$HTML="";

while($row=mysql_fetch_array($res)){

$HTML.="<option value='".$row['id']."'>".$row['1']."</option>";

}

echo $HTML;

}

?>

Output

When we run the index.php file then we will get following output. Suppose we select

Canada from country dropdown then display state in state dropdown along with Canada.

When we select state from state dropdown then city will display in city dropdown along

with selected state.

.1 .2



.3 .4

Conclusion

Using this article one can get easily understand cascading dropdown list in php.

Education

Country State City Dropdown in PHP