Hello friend this post is all about Daynamic Selection of Dropdown in php and Mysql using ajax and jquery. Country city and state dropdown mostly used in new registration of new user and etc.
- This tutorial will explain you how to make Dependent dropdown of country, state, and city, using ajax. You will find them implemented in various sites registration form.when the user select country then second dropdown will populate with appropriate states list then city like wise..
- This Tutorials load the record dynamically from the database according the user input. with ajax call without refreshing the whole page data will be populate.
- country state city Dropdown, using ajax and jqurey fill country state city dropdown.
- ajax country state city dropdown php, onchange in jquery, dynamic dropdown.
Database & Tables
[divider style=”solid” top=”-15″ bottom=”5″]
- First of all open mysql and create one database dbcountries this database contains three tables country state and city as below. state table has relation with country table and city table has relation with state table.
Country State City tabel
Country CREATE TABLE `country` ( `country_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `country_name` VARCHAR( 25 ) NOT NULL ) ENGINE = MYISAM ; State CREATE TABLE `state` ( `state_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `country_id` INT( 3 ) NOT NULL , `state_name` VARCHAR( 35 ) NOT NULL ) ENGINE = MYISAM ; City CREATE TABLE `city` ( `city_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `state_id` INT( 3 ) NOT NULL , `city_name` VARCHAR( 35 ) NOT NULL ) ENGINE = MYISAM ;
Above are the three table the we use in this tutorials each table have three columns which are dependent to each other.
Dbconfig.Php
[divider style=”solid” top=”-15″ bottom=”5″]
- Simple Database Configuration file.
<?php
$DB_host = "localhost";
$DB_user = "root";
$DB_pass = "";
$DB_name = "dbcountries";
try
{
$DB_con = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass);
$DB_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
$e->getMessage();
}
Index.Php
[divider style=”solid” top=”-15″ bottom=”5″]
- main index file where three dropdown box are available.
<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Dependent Select Box using jQuery and PHP</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loding1").hide();
$("#loding2").hide();
$(".country").change(function()
{
$("#loding1").show();
var id=$(this).val();
var dataString = 'id='+ id;
$(".state").find('option').remove();
$(".city").find('option').remove();
$.ajax
({
type: "POST",
url: "get_state.php",
data: dataString,
cache: false,
success: function(html)
{
$("#loding1").hide();
$(".state").html(html);
}
});
});
$(".state").change(function()
{
$("#loding2").show();
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_city.php",
data: dataString,
cache: false,
success: function(html)
{
$("#loding2").hide();
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:200px;
height:35px;
border:2px solid #456879;
border-radius:10px;
}
.color {
color:green;
}
.link {
color:red;
}
</style>
</head>
<body>
<h1 align="center" class="color"> Daynamic Dropdown in PHP &MySql Ajax And jQuery</h1>
<center>
<div>
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM country");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['country_id']; ?>"><?php echo $row['country_name']; ?></option>
<?php
}
?>
</select>
<br><br><br>
<label>State :</label> <select name="state" class="state">
<option selected="selected">--Select State--</option>
</select>
<img src="ajax-loader.gif" id="loding1"></img>
<br><br><br>
<label>City :</label> <select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
<img src="ajax-loader.gif" id="loding2"></img>
<br><br><br>
</div>
<br />
</center>
<h3 align="center"><a href="" class="link">Click Here For Tutorials</a></h3>
<h3 align="center"><a href="http://www.techsofttutorials.com/" class="link">WWW.TechsoftTutorials.com</a></h3>
</body>
</html>
get_state.php
[divider style=”solid” top=”-15″ bottom=”5″]
- This file is for get the all the state record from the state tabel and load dynamically.
<?php
include('dbconfig.php');
if($_POST['id'])
{
$id=$_POST['id'];
$stmt = $DB_con->prepare("SELECT * FROM state WHERE country_id=:id");
$stmt->execute(array(':id' => $id));
?><option selected="selected">Select State :</option><?php
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
<?php
}
}
?>
<!-- www.techsofttutorials.com Techsoft Tutorials, Free Latest Technology Tutorials and Demo. -->
get_city.php
[divider style=”solid” top=”-15″ bottom=”5″]
- In this file have php code for load correlated city according to state selection.
-
<?php include('dbconfig.php'); if($_POST['id']) { $id=$_POST['id']; $stmt = $DB_con->prepare("SELECT * FROM city WHERE state_id=:id"); $stmt->execute(array(':id' => $id)); ?><option selected="selected">Select City :</option> <?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)) { ?> <option value="<?php echo $row['city_id']; ?>"><?php echo $row['city_name']; ?></option> <?php } } ?> <!-- www.techsofttutorials.com Techsoft Tutorials, Free Latest Technology Tutorials and Demo. --> - all the main file are displayed remaining css and java script file include normally we do. It’s not big thing.
- Depending on the dropdown ajax call the function and query should run and get the data from database and populate in dropdown list.
- Loding image is indicate loding time of ajax function. When Query response comes then login image invisible.
Live Demo-:
[button color=”orange” size=”big” link=”http://demo.techsofttutorials.com/ajax_country_state_city_dropdown_using_php_mysql” target=”_blank” ]Live Demo[/button]
[button color=”blue” size=”big” link=”http://sh.st/b3Hh8″ target=”blank” ]Download[/button]