a digital blog

AJAX, JQuery, PHP, Tutorial

PHP Ajax Country State City Drop Down

dropdown

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

On the basis 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 and 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 name.

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

Sample database design for table name state.

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

CREATE TABLE IF NOT EXISTS `state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `country_id` int(11) NOT NULL DEFAULT '1',
)

Sample database design for table name city.

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

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

db.php

Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";
try{
	$con=new PDO("mysql:host=$mysql_db_hostname;dbname=$mysql_db_database","$mysql_db_user","$mysql_db_password");
}catch(PDOExection $e){
	echo $e->getMessage();
}

index.php

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

include_once('db.php');
//connect with database
$sql="select id,name from country";
$stmt=$con->prepare($sql);
$stmt->execute();
$arrCountry=$stmt->fetchAll(PDO::FETCH_ASSOC);
// fetch all country

Java Script Code

$(document).ready(function(){
		jQuery('#country').change(function(){
			var id=jQuery(this).val();
			if(id=='-1'){
				jQuery('#state').html('Select State');
			}else{
				$("#divLoading").addClass('show');
				jQuery('#state').html('Select State');
				jQuery('#city').html('Select City');
				jQuery.ajax({
					type:'post',
					url:'get_data.php',
					data:'id='+id+'&type=state',
					success:function(result){
						$("#divLoading").removeClass('show');
						jQuery('#state').append(result);
					}
				});
			}
		});
		jQuery('#state').change(function(){
			var id=jQuery(this).val();
			if(id=='-1'){
				jQuery('#city').html('Select City');
			}else{
				$("#divLoading").addClass('show');
				jQuery('#city').html('Select City');
				jQuery.ajax({
					type:'post',
					url:'get_data.php',
					data:'id='+id+'&type=city',
					success:function(result){
						$("#divLoading").removeClass('show');
						jQuery('#city').append(result);
					}
				});
			}
		});
	});

get_data.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('db.php');
$id=$_POST['id'];
$type=$_POST['type'];

if($type=='city'){
	$sql="select id,name from city where state_id='$id'";
}else{
	$sql="select id,name from state where country_id='$id'";
}
$stmt=$con->prepare($sql);
$stmt->execute();
$arr=$stmt->fetchAll(PDO::FETCH_ASSOC);
$html='';
foreach($arr as $list){
	$html.=''.$list['name'].'';
}
echo $html;

6 Comments

  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. Amar Jain

    Super Cool…..Nice Work..

  5. Jose

    Wow, Working perfectly fine

  6. Patricia Martins

    Very useful thanks.


*

Copyright © 91 Web Lessons - a digital blog