How to Create Dynamic Dependent Select Box

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

195 Comments

  • Daftar Judi slot

    September 8, 2020 - 6:03 pm

    These are in fact enormous ideas in on the topic
    of blogging. You have touched some good things here.
    Any way keep up wrinting.

  • https://www.dwell.com/query/wwwnubobeautycom

    September 8, 2020 - 5:58 pm

    Hi there! This post couldn’t be written any better! Reading this post reminds me of my old room mate!
    He always kept talking about this. I will forward this post
    to him. Pretty sure he will have a good read. Many thanks for sharing!

  • shirt uniform

    September 8, 2020 - 5:39 pm

    I was more than happy to discover this web site. I wanted to thank you for ones time for
    this particularly fantastic read!! I definitely really
    liked every part of it and i also have you book-marked to look at
    new information in your site.

  • game Slot depo pulsa

    September 8, 2020 - 5:27 pm

    I wanted to thank you for this good read!! I definitely loved every bit of it.
    I have got you book marked to check out new things
    you post…

  • https://pagesix.com/search/www.nubobeauty.com/

    September 8, 2020 - 12:17 pm

    Fantastic goods from you, man. I’ve consider your stuff prior to and you
    are simply too excellent. I actually like what you’ve acquired right here, certainly like what you are saying and the best way through which you assert it.
    You are making it enjoyable and you continue to take care of to stay it smart.

    I can not wait to read much more from you. That is actually a wonderful website.

Leave A Reply