How to make Dependent dropdowns

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.

Leave a Reply

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