We can make a dependent dropdown using the jQuery and ajax technique. We will create a level 5 Dropdown using Jquery. We will fetch data from the database without refreshing the page. We have designed a database with four tables.
We have four tables in the DATABSE . You can download the source code from this link : Download Project
First, we will create an index.php file that will have the design part of the project.I have used bootstrap 4 for designing and the jQuery link for script tag.
// code starts here
<?php
$conn = mysqli_connect("localhost","root","","mulitiple_dropdown");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3 class="text-center mt-4">Select State List</h3>
<div class="row mt-5">
<div class="col-sm-2">
<h5 class="text-info mb-4">Choose State List</h5>
<select name="" id="state" class="form-control">
<option><h1>Select State</h1></option>
<?php $sql = "SELECT * from states";
$query = mysqli_query($conn,$sql);
while($row=mysqli_fetch_assoc($query))
{ ?>
<option value="<?php echo $row['id'] ?>"><?php echo $row['state_name'] ?></option>
<?php } ?>
</select>
</div>
<div class="col-sm-3">
<h5 class="text-info mb-4"> City List</h5>
<select id="city" class="form-control" disabled >
<option>City List</option>
</select>
</div>
<div class="col-sm-3">
<h5 class="text-info mb-4">Stadiums List</h5>
<select id="stadium" class="form-control" disabled>
</select>
</div>
<div class="col-sm-4">
<h5 class="text-info mb-4">Stadiums Address</h5>
<select id="address" class="form-control" disabled>
</select>
</div>
</div>
</div>
</body>
</html>
<script>
// Get City List
$(document).ready(function(){
$('#state').change(function(){
var state = $('#state').val();
$('#city').html('');
$.ajax({
url:'fetch_records.php',
type:'POST',
data:{stateName:state},
dataType: "json",
success:function(data)
{
$.each(data, function(key, city)
{
$('#city').prop('disabled', false).css('background','aliceblue').append('<option value="'+city.id+'">'+city.city_name+'</option>');
});
}
});
});
});
// Get STADIUM and ADDRESS by CITY
$(document).ready(function(){
$('#city').change(function(){
var city = $('#city').val();
$.ajax({
url:'get_stadium_address.php',
type:'POST',
data:{cityID:city},
dataType: "json",
success:function(data)
{
$.each(data, function(key, city)
{
$('#stadium').prop('disabled', false).css('background','aliceblue').html('<option>'+city.stadium_name+'</option>');
$('#\').prop('disabled', false).css('background','aliceblue').html('<option>'+city.stadium_add+'</option>');
});
}
});
});
});
</script>
// Code ends here
Now we will make fetch_records.php and this page will fetch states records from database .
// Code starts here
<?php
$conn = mysqli_connect("localhost","root","","mulitiple_dropdown");
$getCity = $_POST['stateName'];
$sql = "SELECT city.* from states JOIN city ON states.id = city.state_id WHERE states.id = $getCity";
$query = mysqli_query($conn,$sql);
$output =array();
while($row=mysqli_fetch_assoc($query))
{
$output[] = $row;
}
echo json_encode($output);
?>
// Code Ends here
Now we will make get_stadium_address.php for address and stadium details.
// Starts here
<?php
$conn = mysqli_connect("localhost","root","","mulitiple_dropdown");
$cityID = $_POST['cityID'];
$sql = "SELECT stadium.stadium_name,address.stadium_add from city
JOIN stadium ON city.id = stadium.city_id
JOIN address ON city.id = address.city_id
WHERE city.id = $cityID";
$query = mysqli_query($conn,$sql);
$output =array();
while($row=mysqli_fetch_assoc($query))
{
$output[] = $row;
}
echo json_encode($output);
?>
// Ends here
I have mentioned the link for project download . You can download the code from the link.