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
	}
}
?>

Check on Facebook

317 Comments

design de cuisine
October 14, 2020 - 5:35 am
If some one desires expert view on the topic of blogging afterward i recommend him/her to go to see
this website, Keep up the fastidious work.

w88
October 13, 2020 - 11:48 am
You should be a part of a contest for one of the greatest blogs online.
I will highly recommend this website!

Legalize marijuana laws
October 4, 2020 - 1:07 am
This is the perfect web site for everyone who wishes
to find out about this topic. You know so much its almost hard to argue with you (not
that I personally will need to…HaHa). You definitely put a new spin on a subject which has been written about for many years.

Great stuff, just great!

togel online
September 29, 2020 - 7:09 pm
Yes! Finally something about sport.

หวย
September 26, 2020 - 2:52 am
Hi there to all, how is the whole thing, I think every one is getting more from
this site, and your views are fastidious for new viewers.