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