How to make a dependent dropdown in Jquery Php

We can make a dependent dropdown using Jquery and PHP. We will level two drop-down in jquery and PHP.

We will use select tag of HTML for dropdown <select><option></option></select>

Now create database in PHPMyAdmin or MySQL workbench. Now make four columns in the database table ( student ) :- id ,name,age,phone

Now create a page fetch.php. this page is used to get data from the database

<?php 

  $conn = mysqli_connect('localhost','root','','test');
  $id = $_POST['id'];
  $sql = "SELECT * FROM student WHERE id= $id ";
  $result = mysqli_query($conn,$sql);

  $out='';
  while($row = mysqli_fetch_assoc($result)) 
  {   
     $out .=  '<option>'.$row['phone'].'</option>'; 
  }
   echo $out;
   
?>

Now we will make an index.php page for the main page

<?php
  $conn = mysqli_connect('localhost','root','','test') // Connection
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
 <div class="container mt-4">
 <h4 class="text-center">Data show using Jquery-Ajax Dropdown</h4><br>
   <div class="row">

    <div class="col-sm-4">
      <h6>Employee Name</h6>
        <select class="custom-select" name="select" id="selectID">
        <option>Select Option</option>

        <?php $sql = "SELECT * FROM student";
            $result = mysqli_query($conn,$sql);
            while($row = mysqli_fetch_assoc($result)) {?>
            <option value="<?php echo $row['id'] ?>"><?php echo $row['name'] ?></option>
            <?php }?>

        </select>
     </div> 

     <div class="col-sm-4">  
     <h6>Employee Phone</h6>
      <select  class="custom-select"  name="select" id="show">
      </select>
    </div>
   
   </div>
 </div>    
</body>
</html>

<script>
  $(document).ready(function(){
     $('#selectID').change(function(){
      var Stdid = $('#selectID').val(); 

      $.ajax({
        type: 'POST',
        url: 'fetch.php',
        data: {id:Stdid},  
        success: function(data)  
         {
            $('#show').html(data);
         }
        });
     });
  });
</script>

Please make table columns with name: id, name, age, phone

Now download the source code here : dropdown_in_Jquery

How to make a dependent dropdown in Jquery Php

Leave a Reply Cancel reply