PHP Ajax Country State City Drop Down

PHP Ajax Country State City Drop Down

This post explains you about how to create PHP Ajax Country State City Drop Down.

On the basic of selected country, related state will be populated in state dropdown and on the basis of selected state dropdown, related city will be populated in city dropdown.

 
Download Link   Demo Link
 

I am using three datebase table here country,state and city table

Sample database design for table name country.

This table contains  id (primary key) and country_name.

CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country_name` varchar(500) NOT NULL
)

Sample database design for table name state.

This table contains  id (primary key), country_id and state_name.

CREATE TABLE IF NOT EXISTS `state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country_id` int(11) NOT NULL,
  `state_name` varchar(500) NOT NULL
)

Sample database design for table name city.

This table contains  id (primary key), state_id and city_name.

CREATE TABLE IF NOT EXISTS `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `state_id` int(11) NOT NULL,
  `city_name` varchar(500) NOT NULL
)

dbConnect.inc.php

Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user,
       $mysql_db_password or die("Could not connect database");
//Create a new connection
mysql_select_db($mysql_db_database, $con) or
                 die("Could not select database");
// select database

index.php

Contains three dropdown display code,with country dropdown already populated with country list.

include_once('inc/dbConnect.inc.php');
//connect with database
$sqlCountry="select id,country_name from country
             order by country_name asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
// fetch all country

Java Script Code

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

/*This function is called when state dropdown value change*/
function selectState(state_id){
  if(state_id!="-1"){
    loadData('city',state_id);
  }else{
    $("#city_dropdown").html("<option value='-1'>Select city</option>");
  }
}

/*This function is called when city dropdown value change*/
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>");
 }
}

/*This is the main content load function, and it will
     called whenever any valid dropdown value changed.*/
function loadData(loadType,loadId){
  var dataString = 'loadType='+ loadType +'&loadId='+ loadId;
  $("#"+loadType+"_loader").show();
  $("#"+loadType+"_loader").fadeIn(400).
        html('Please wait... <img src="image/loading.gif" />');
  $.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>
/*This code will show country dropdown list*/
<select onchange="selectCity(this.options[this.selectedIndex].value)">
   <option value="-1">Select country</option>
   <?php
     while($rowCountry=mysql_fetch_array($resCountry)){
   ?>
     <option value="<?php echo $rowCountry['id']?>">
            <?php echo $rowCountry['country_name']?>
     </option>
   <?php
   }
   ?>
</select>

/*State dropdown list*/
<select id="state_dropdown"
     onchange="selectState(this.options[this.selectedIndex].value)">
<option value="-1">Select state</option>
</select>
<span id="state_loader"></span>

/*City dropdown list*/
<select id="city_dropdown">
<option value="-1">Select city</option>
</select>
<span id="city_loader"></span>

loadData.php
/*This page will be contain the logic part of dropdown and after change index
page dropdown, this file call by ajax to display corresponding dropdown list*/

include('dbConnect.inc.php');
$loadType=$_POST['loadType'];
$loadId=$_POST['loadId'];

if($loadType=="state"){
   $sql="select id,state_name from state_test where
         country_id='".$loadId."' order by state_name asc";
}else{
   $sql="select id,city_name from city_test 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;
}
Both comments and pings are currently closed.

6 Responses to “PHP Ajax Country State City Drop Down”

  1. thanks Dude For such a useful example of Ajax :)

  2. Its really a great blog with high quality materials. I am blessed to have reach you.

  3. thanx man that is so useful for all of us thank you .

  4. Super Cool…..Nice Work..

  5. Wow, Working perfectly fine

  6. Very useful thanks.