How to Create Dynamic Dependent select box using ajax
You need a dynamic dependent select box. We will explain how to create a dynamic dependent select box in PHP, jquery and ajax.
index.php
<?php
include_once 'dbconfig.php';
?>
<html>
<head>
<title>Dynamic Dependent Select Box using Ajax</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>
</body>
</html>dbconfig.php<?php $DB_host = "localhost"; $DB_user = "root"; $DB_pass = ""; $DB_name = "database"; 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(); }get_city.php<?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 } } ?>get_state.php<?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 } } ?>
Comments
Post a Comment