In this tutorial we are going to explain the dynamic dependent multiple select boxes using jQuery, Ajax, PHP and MySQL.
The dynamic dependent select box is mostly used for two dynamic dropdowns but in this tutorial, we’ll implement four relational dynamic dropdown using jQuery, Ajax, PHP and MySQL.
At first, the list of a father would be displayed the when you select any of them then their respective child name would have displayed then when you select any child then the grade of the child would be fetched from the MySQL database and appear in the states dropdown.
Create Database and Tables
Create a database, like dynamic_dropdown consists of four tables father, child, school and grade, Father table has a relation with child table and child table has a relation with school table then school table has relation with grade table.
Create Connection.php File
<?php
$db = new mysqli('localhost', 'root','' ,'dynamic_dropdown');
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
?>
Create index.php File
<!DOCTYPE html>
<html>
<head>
<title>TechJunkGigs</title>
<style type="text/css">
.select-boxes{width: 280px;text-align: center;}
select {
font-family: Georgia;
font-weight: bold;
font-size: 14px;
height: 39px;
padding: 7px 8px;
width: 250px;
outline: none;
margin: 10px 0 10px 0;
}
select option{
font-family: Georgia;
font-size: 14px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min/js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#school').on('change',function(){
var school_id = $(this).val();
if(school_id){
$.ajax({
type:'POST',
url:'ajax.php',
data:'school_id='+school_id,
success:function(html){
$('#grade').html(html);
}
});
}else{
$('#school').html('<option value="">Select father first</option>');
$('#grade').html('<option value="">Select child first</option>');
}
});
$('#father').on('change',function(){
var father_id = $(this).val();
if(father_id){
$.ajax({
type:'POST',
url:'ajax.php',
data:'father_id='+father_id,
success:function(html){
$('#child').html(html);
$('#school').html('<option value="">Select child first</option>');
}
});
}else{
$('#child').html('<option value="">Select father first</option>');
$('#school').html('<option value="">Select child first</option>');
}
});
$('#child').on('change',function(){
var child_id = $(this).val();
if(child_id){
$.ajax({
type:'POST',
url:'ajax.php',
data:'child_id='+child_id,
success:function(html){
$('#school').html(html);
}
});
}else{
$('#school').html('<option value="">Select child first</option>');
}
});
});
</script>
</head>
<h2>Dynamic Dropbox using jQuery, Ajax,PHP and MySQL</h2>
<body align="centre">
<div class="select-boxes">
<?php
include('connection.php');
$query = $db->query("SELECT * FROM father ORDER BY father ASC");
$rowCount = $query->num_rows;
?>
<select name="father" id="father">
<option value="">Select father</option>
<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['father_id'].'">'.$row['father'].'</option>';
}
}
else
{
echo '<option value="">father not available</option>';
}
?>
</select>
<select name="child" id="child">
<option value="">Select father first</option>
</select>
<select name="school" id="school">
<option value="">Select child first</option>
</select>
<select name="grade" id="grade">
<option value="">Select School first</option>
</select>
</div>
</body>
</html>
Create ajax.php File
This file is requested by the Ajax and in this file child, school name or grade data is fetched from the database based on the requested father id , child id or school id. Also, the respective select options HTML are returned to the Ajax success function.
<?php
include('connection.php');
if(isset($_POST["father_id"]) && !empty($_POST["father_id"])){
$query = $db->query("SELECT * FROM child WHERE father_id = ".$_POST['father_id']);
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Select child</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['child_id'].'">'.$row['child'].'</option>';
}
}else{
echo '<option value="">child not available</option>';
}
}
if(isset($_POST["child_id"]) && !empty($_POST["child_id"])){
$query = $db->query("SELECT * FROM school WHERE child_id = ".$_POST['child_id']);
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">School</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['school_id'].'">'.$row['school'].'</option>';
}
}else{
echo '<option value=""> not available</option>';
}
}
if(isset($_POST["school_id"]) && !empty($_POST["school_id"])){
$query = $db->query("SELECT * FROM grade WHERE school_id = ".$_POST['school_id']);
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Grade</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['grade_id'].'">'.$row['grade'].'</option>';
}
}else{
echo '<option value=""> not available</option>';
}
}
?>