Dynamic Dependent Select box using Jquery Ajax

In this tutorial we are going to learn how to do dynamic dependent select box usign Jquery Ajax,PHP and mysql. Basically dependent select box means when a selection made in a parent box then it allows automatically refresh or change the child box list data. This example will show how to create dynamic dependencies between paren and child select box. Normally this type of ajax select box onchange php or select box onchange jquery ajax is require in registration form mainly for selecting country, state and city from select box dropdown list. So i am giving a simple jquery ajax select onchange example like that and demonstrate each lines of code that how to make or create jquery ajax onchange in dropdown. You can use this easy jquery ajax dropdown onchange example in php in your web application. You can free download jquery ajax select onchange php script from here. Hope you like this.
Take a quick look at this live demo to understand the flow of the dynamic dependent select box using javascript. Also you can free download this jquery ajax onchange select option form with dynamic dropdown select box from here and can try in your localhost or live server where you want to do.

Learn how to create dynamic dependent select box using jquery ajax

First we have to create database and tables for dynamic dependent select box.

<?php
CREATE TABLE `country_table` (
`country_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`country_name` VARCHAR( 25 ) NOT NULL
) ENGINE = MYISAM ;
?>
<?php
CREATE TABLE `state_table` (
`state_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`country_id` INT( 3 ) NOT NULL ,
`state_name` VARCHAR( 35 ) NOT NULL
) ENGINE = MYISAM ;
?>
<?php
CREATE TABLE `city_table` (
`city_id` INT( 3 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`state_id` INT( 3 ) NOT NULL ,
`city_name` VARCHAR( 35 ) NOT NULL
) ENGINE = MYISAM ;
?>

Create database connection.

<?php
$host = 'localhost';
$username = 'username';
$password = 'password';
$database = 'database';
$dbconfig = mysqli_connect($host,$username,$password,$database);
?>

Now we have to create select boxes in a form for dynamically fetch data. And show the child list.

<?php include("db_config.php");?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dynamic Dependent Select Box using Jquery Ajax | Click4knowledge</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
	 $("#country").change(function()
	 {
	  var id=$(this).val();
	  var data = 'id='+ id;
	 
	  $.ajax
	  ({
	   type: "POST",
	   url: "get_state.php",
	   data: data,
	   cache: false,
	   success: function(html)
	   {
		  $("#state").html(html);
	   } 
	   });
	  });
 
 
 $("#state").change(function()
 {
	  var id=$(this).val();
	  var data = 'id='+ id;
	 
	  $.ajax
	  ({
	   type: "POST",
	   url: "get_city.php",
	   data: data,
	   cache: false,
	   success: function(html)
	   {
		$("#city").html(html);
	   } 
	   });
  });
 
});
</script>
</head>
<body>

<div class="all-main">
    <div class="main-container">
        <header>        	
            <div class="header-top">
            	<div class="layout">
            	<a href="http://click4knowledge.com" class="h-left"><i class="fa fa-angle-double-left"></i> back to website</a>
                <h1>Dynamic Dependent Select Box using Jquery Ajax</h1>
                <a href="#" class="h-right"><i class="fa fa-angle-left"></i> back to tutorial</a>
                </div>
            </div>
            <div class="bot-head">
            	<div class="layout">
                    <a href="http://click4knowledge.com" id="logo">
                    <img src="images/logo.png" alt="" title="">
                    </a>
                    
                </div>
            </div>
        </header>
        <div class="layout"> 
        	<div class="main">
                <div class="left-panel">           
                    <form class="form-horizontal" method="post">
                        <select name="country" id="country" class="form-control">
                        	<option value="">Select Country</option>
                            <?php $sql_query="SELECT * FROM country_table order by country_name asc";
								  $result=mysqli_query($dbconfig,$sql_query);
								  while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
							?>
                            <option value="<?php echo $row['country_id'];?>"><?php echo $row['country_name'];?></option>
                            <?php }?>
                        </select>
                        <select name="state" id="state" class="form-control">
                        
                        </select>
                       <select name="city" id="city" class="form-control">
                        
                        </select>
                    </form>
				</div>
                
            </div>
        </div>
         
        </div>
    </div>
</div>
<footer>
    <a href="http://click4knowledge.com">Click4Knowledge.com</a> Copyright &copy; 2015.
</footer>
</body>
</html>

Now we just need to create two php files from where we will fetch the data when change the parent select box. In this example parent select box is the country select box.

<?php
include('db_config.php');
if($_POST['id'])
{
 $id=$_POST['id'];
  
 $sql_query="SELECT * FROM state_table where country_id='$id' order by state_name asc";
 $result=mysqli_query($dbconfig,$sql_query);
 ?>
 <option selected="selected">Select State :</option><?php
 while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
 {
  ?>
        <option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
        <?php
 }
}
?>
<?php
include('db_config.php');
if($_POST['id'])
{
 $id=$_POST['id'];
  
 $sql_query="SELECT * FROM city_table where state_id='$id' order by city_name asc";
 $result=mysqli_query($dbconfig,$sql_query);
 ?>
 <option selected="selected">Select City :</option><?php
 while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
 {
  ?>
        <option value="<?php echo $row['city_id']; ?>"><?php echo $row['city_name']; ?></option>
        <?php
 }
}
?>

In this way we can create dynamic dependent select box using jquery ajax. So basically if your query about jquery ajax select onchange php, jquery select box onchange get value, jquery select box onchange function like these i think this jquery ajax onchange select option example will be very helpful for you. So, don’t miss to learn and practice yourself. Thanks for watching this tutorial. You can try yourself and share with your friends. I will share some useful script in PHP as well as some tips and tricks in PHP programming. Viewers can subscribe our newsletter to get all the updates about web programming. Share and likes will be appreciated also help to evaluate our self.
Support
If you need any help regarding the same please feel free to comment we love to help you. Have a good day.

Leave a Reply

Your email address will not be published. Required fields are marked *