Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
Database Table
CREATE TABLE `carbrands` (
`brand_id` int(11) NOT NULL,
`brand_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `carbrands` (`brand_id`, `brand_name`) VALUES
(1, 'Toyota'),
(2, 'Honda'),
(3, 'Suzuki'),
(4, 'Mitsubishi'),
(5, 'Hyundai');
ALTER TABLE `carbrands`
ADD PRIMARY KEY (`brand_id`);
ALTER TABLE `carbrands`
MODIFY `brand_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
CREATE TABLE `carmodels` (
`model_id` int(11) NOT NULL,
`brand_id` int(11) NOT NULL,
`car_models` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `carmodels` (`model_id`, `brand_id`, `car_models`) VALUES
(1, 1, 'Toyota Corolla'),
(2, 2, 'Toyota Camry'),
(3, 1, 'Toyota Yaris'),
(4, 1, 'Toyota Sienna'),
(5, 1, 'Toyota RAV4'),
(6, 1, 'Toyota Highlander'),
(7, 2, 'Honda HR-V'),
(8, 2, 'Honda Odyssey'),
(9, 3, 'Swift'),
(10, 3, 'Celerio'),
(11, 3, 'Ertiga'),
(12, 3, 'Vitara'),
(13, 4, 'Mirage'),
(14, 4, 'Mirage G4'),
(15, 4, 'Xpander Cross'),
(16, 4, 'Montero Sport'),
(17, 4, 'Strada Athlete'),
(18, 5, 'Reina '),
(19, 5, 'Accent'),
(20, 5, 'Elantra'),
(21, 5, 'Tucson');
ALTER TABLE `carmodels`
ADD PRIMARY KEY (`model_id`),
ADD KEY `industry_id` (`brand_id`);
ALTER TABLE `carmodels`
MODIFY `model_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
index.php
//index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dependent Dropdown with Loading using Jquery Ajax and PHP Mysqli</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<?php
include('conn.php');
?>
<div class="container">
<h3 class="mt-4 text-center text-secondary">Dependent Dropdown with Loading using Jquery Ajax and PHP Mysqli</h3>
<div class="row">
<div class="col-sm-4">
<h5 class="mt-4">Car Brand Name</h5>
<select name="carbrand" id="carbrand" class="form-select">
<?php
$sql = "SELECT * FROM carbrands";
$query = mysqli_query($conn,$sql);
while($row=mysqli_fetch_assoc($query))
{
echo '<option value="'.$row['brand_id'].'">'.$row["brand_name"].'</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<h5 class="mt-4 ">Car Model</h5>
<p id="loading" style="display:none">
<img src="img/loader.gif"><span class="sr-only">Loading...</span>
</p>
<select class="form-select" name="select" id="show" style="display:none;"></select>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#carbrand').change(function(){
var Stdid = $('#carbrand').val();
$.ajax({
url:'fetch.php',
type:'POST',
data:{id:Stdid},
success:function(response)
{
$('#loading').css('display','block');
setTimeout(function()
{
$('#show').html(response);
$('#show').show();
$('#loading').css('display','none');
},3000);
}
});
});
});
</script>
</body>
</html>
conn.php
//conn.php
<?php
$conn = mysqli_connect("localhost","root","","testingdb");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
fetch.php
//fetch.php
<?php
include('conn.php');
$id = $_POST['id'];
$sql = "SELECT * FROM carmodels WHERE brand_id= $id ";
$result = mysqli_query($conn,$sql);
$out='';
while($row = mysqli_fetch_assoc($result))
{
$out .= '<option>'.$row['car_models'].'</option>';
}
echo $out;
?>
