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


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

  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

  $conn = mysqli_connect('localhost','root','','test') // Connection

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script type="text/javascript" src=""></script>
 <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 }?>


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

      var Stdid = $('#selectID').val(); 

        type: 'POST',
        url: 'fetch.php',
        data: {id:Stdid},  
        success: function(data)  


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

Now download the source code here : dropdown_in_Jquery





Leave a Reply

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