Dynamic Dependent Select Box using jQuery, Ajax and PHP

Abhigyan Singh 24th Jul 2020

There are many situation where you will need to dynamic dropdown like you have a dropdown which contains countries name and you have to find all state of that selected country in select box or drop down. Here we are going to tell you how to make dynamic select box using jQuery, Ajax and PHP.

Firstly we will fetch all country from country table then we will use Ajax and jQuery to fetch all state of selected country. After getting all state we will append to all state on state dropdown.

This is the best solution where we want to get the input data from users in sequential way. Also if the data is inter-linked and based on the input data of previous drop down box. I have written one tutorial on Multiple Select drop down list option in PHP, Mysql, Jquery in my previous article.

Advantages of dynamic dependent drop down box

Dynamic select box has several advantages to add in any application where it required.

  1. It increase the user interface experience without navigating to any other page.
  2. Performance of the web application will increase by calling a chunk of request using Ajax.
  3. This feature will give filtered option to user without having a very lengthy drop down.
  4. This is best suitable for interdependent combo fields.

Uses of dynamic dependent drop down box

This is very common functionality to implement dependent drop down features like e-commerce for Category and product relation in shopping cart, class-student,course-lessons etc.

Here we are using MySQLi as a database which contains two table country and state. For making dynamic dependent select box use following steps as shown below:

1.  Create database discussdesk from phpmydmin and can also use following Mysql query to create it as shown below:

CREATE DATABASE discussdesk;

2. Create two table countries and states from phpmyadmin. You can also create by  following sql query as show below:

  `id` int(11) NOT NULL,
  `sortname` varchar(3) NOT NULL,
  `name` varchar(150) NOT NULL

  `id` int(11) NOT NULL,
  `name` varchar(30) NOT NULL,
  `country_id` int(11) NOT NULL DEFAULT '1'

These following above query will create two table. To insert data in these table you can get data by clicking download button or import all table with data. We are attaching discussdesk.sql file to import all table with data in discussdesk database.

Entity Relationship Diagram (ERD) of above tables for dynamic dependent drop down

Entity Relationship Diagram of Dynamic Dependent Select Box

This ER diagram will clearly explain about the structure of tables and its dependency. Here there are two tables named country and state are mentioned and both the tables is joined with one entity country_id.

Dynamic Dependent Select Box means that there will be more than one dropdown or select box and the data of 'child' drop down box is depend on the value of 'parent' drop down box. It is used to populate the data in multiple select box based on the data of previous select box.

Earlier, I got a chance to implement multiple dependent dropdown in one of my project which is related to server side filtering in php, mysql and Ajax.

3.  Now create db_config.php file with following code as shown below and put your database name what you made from phpmyadmin.

$host= "localhost";
$username= "root";
$password = "";
$db_name = "Your_database";
$db = new mysqli($host,$username,$password,$db_name);
die("connection failed:". $db->connect_error);


4.  Create Second file country.php in which we fetch all countries from database and append in select box. Here we fire function on onchange event of country select box in which using Ajax it will go on state.php page with country id to fetch all record from states table and return in Ajax response.

After getting response in success function we append response to state dropdown box basis of id. The code of country.php is as follows:

width: 150px;
height: 30px;
font-size: 18px;
margin-left: 40px;
$sql= "select * from countries";
$query = $db->query($sql);
$data = $query->fetch_assoc();


<select name="counntry" id="country" class="dropdown" onchange="change_country();">
<option value="">Select Country</option>
<?php while($row = $query->fetch_assoc()) { ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php } ?>

<span class="space"></span>
<select name="state" id="state" class="dropdown">
<option value="">Select State</option>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

var country = $("#country").val();

type: "POST",
url: "state.php",
data: "country="+country,
cache: false,
success: function(response)
//alert(response);return false;


5.  Create another file state.php file as shown below. This file fetch all record from states table basis of country_id column and return all record to Ajax success function.

$country = $_POST['country'];
$sql= "select * from states where country_id='$country'";
$query = $db->query($sql);
echo '<option value="">Select State</option>';
while($res = $query->fetch_assoc()){
echo '<option value="'.$res['name'].'">'.$res['name'].'</option>';


The another way to get the filtered data the keyword which is entered by user and this can be done by using Autocomplete search in PHP, Mysql.

I hope this article will help to make two Dynamic Dependent Select Box. Still you have any query then feel free to comment below.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk