In this post we are going to explain about Dynamic Selection of Dropdown in PHP and MySql using Ajax and jQuery. Country state and city dropdown mostly used in web application. We load the record dynamically from the database with ajax call without refreshing the whole page.
First we will create a database with 3 tables country, state and city.
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 ;
Database Configuration:
<?php
$DB_host = _HOSTNAME;
$DB_user = _USERNAME;
$DB_pass = _PASSWORD;
$DB_name = _DATABASENAME;
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:
<?php
include_once 'dbconfig.php';
?>
<html>
<head>
<title>StepBlogging.com - Dynamic Dropdown in PHP, MySql ,Ajax & jQuery</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>
</head>
<body>
<div id="main-container">
<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>
</body>
</html> Ajax call for states:
<?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
}
}
?> Ajx call for cities:
<?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
}
}
?>
