How to make dependent dropdown list using jquery Ajax in PHP

12304 views 5 months ago PHP

Dynamic Category and Subcategory Dropdown in PHP MySQL Ajax. In this tutorial, we will show you how to engender categories and subcategories in PHP MySQL utilizing Ajax.

Sometimes, you require to cull a query in PHP so we engender separate tables to exhibit culled subcategories predicated on culled category dropdowns. But in this tutorial, we will utilize/learn only a single table use (category and subcategory in one table) for a PHP dynamic fetch data from database in dropdownlist in PHP.

This tutorial will avail you step by step how to fetch data from a database in PHP utilizing MySQL on dynamic category and subcategory dropdown list onchange in PHP MySQL utilizing Ajax or populate the second dropdown predicated on the first dynamic dropdown in PHP. As well as learn, how to fetch data from database in PHP utilizing MySQL.

In this post category subcategory dropdown in PHP MySQL example, we will show subcategory in the dropdown list based on the selected category in PHP using ajax from the database.

Dynamic Category and Sub-Category Dropdown List in PHP using Ajax

Follow the below simple and easy code display category and subcategory in dropdown list onchange in PHP MySQL using jQuery ajax:

Step 1: Create Table
Step 2: Insert Data In Table(Category and SubCategory)
Step 3: Create DB Connection PHP File
Step 4: Create Form And Category, SubCategory Dropdown in Form
Step 5: Get Sub Category in Dropdown List by Category Id

Step 1: Create Table

Open your database and run the following SQL query to create categories table into database:

CREATE TABLE `categories` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) NOT NULL DEFAULT '0',
  `category` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2: Insert Data In Table(Category And SubCategory)

In this step, run the following SQL query to insert category and subcategory into MySQL database in PHP:

INSERT INTO `categories` (`id`, `parent_id`, `category`) VALUES
(1, 0, 'General'),
(2, 0, 'PHP'),
(3, 0, 'HTML'),
(4, 7, 'Tables'),
(5, 2, 'Functions'),
(6, 2, 'Variables'),
(7, 3, 'Forms');

Step 3: Create DB Connection PHP File

In this step, create a file name db.php and update the following code into the db.php file:

This code is used to create a MySQL database connection in your category subcategory dropdown in PHP MySQL project.

<?php
    $servername='localhost';
    $username='root';
    $password='';
    $dbname = "my_db";
    $conn=mysqli_connect($servername,$username,$password,"$dbname");
      if(!$conn){
          die('Could not Connect MySql Server:' .mysql_error());
        }
?>

Step 4: Create Form To Category, SubCategory

In this step, create an index.php file and update the below PHP and HTML code into the index.php file.

This HTML code shows the category and subcategory dropdown list. And the PHP and ajax code of this file will dynamically populate subcategories in the dropdown list based on the selected category in the dropdown and fetch data from database in dropdownlist in php.

Now, update the following PHP MySQL ajax and HTML form into index.php file:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Dependent Dropdown - HackTheStuff</title>
      <!-- Fonts -->
      <link href="//fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
      <!-- Styles -->
      <link rel="stylesheet" href="https://stackpath.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>
      <style>
         html, body {
         background-color: #fff;
         color: #636b6f;
         font-family: 'Nunito', sans-serif;
         font-weight: 200;
         height: 100vh;
         margin: 0;
         }
         .full-height {
         height: 100vh;
         }
         .flex-center {
         align-items: center;
         display: flex;
         justify-content: center;
         }
         .position-ref {
         position: relative;
         }
         .top-right {
         position: absolute;
         right: 10px;
         top: 18px;
         }
         .content {
         text-align: center;
         }
         .title {
         font-size: 84px;
         }
         .links > a {
         color: #636b6f;
         padding: 0 25px;
         font-size: 13px;
         font-weight: 600;
         letter-spacing: .1rem;
         text-decoration: none;
         text-transform: uppercase;
         }
         .m-b-md {
         margin-bottom: 30px;
         }
      </style>
   </head>
   <body>
      <div class="container mt-5">
         <div class="row justify-content-center">
            <div class="col-md-8">
               <div class="card">
                  <div class="card-header">
                     <h2 class="text-primary">Dependent Dropdown - HackTheStuff</h2>
                  </div>
                  <div class="card-body">
                     <form>
                        <div class="form-group">
                           <label for="CATEGORY-DROPDOWN">Category</label>
                           <select class="form-control" id="category-dropdown">
                              <option value="">Select Category</option>
                              <?php
                                 require_once "db.php";
                                 $result = mysqli_query($conn,"SELECT * FROM categories where parent_id = 0");
                                 while($row = mysqli_fetch_array($result)) {
                                 ?>
                              <option value="<?php echo $row['id'];?>"><?php echo $row["category"];?></option>
                              <?php
                                 }
                                 ?>
                           </select>
                        </div>
                        <div class="form-group">
                           <label for="SUBCATEGORY">Sub Category</label>
                           <select class="form-control" id="sub-category-dropdown">
                           </select>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script>
         $(document).ready(function() {
    $('#category-dropdown').on('change', function() {
        var category_id = this.value;
        $.ajax({
            url: "fetch-subcategory-by-category.php",
            type: "POST",
            data: {
                category_id: category_id
            },
            cache: false,
            success: function(result) {
                $("#sub-category-dropdown").html(result);
            }
        });
    });
});
      </script>
   </body>
</html>

Now, create a new PHP file name fetch-subcategory-by-category.php. how to fetch data from database in PHP using MySql in This file code will fetch and show a subcategory (second dropdown) based on the selected category (previous dropdown selection) in PHP. We learn dynamic dropdown in PHP.

So, update sub-categories following PHP and HTML code into the fetch-subcategory-by-category.php file:

Step 5: Get SubCategory In Dropdown List By Category Id

<?php
require_once "db.php";
$category_id = $_POST["category_id"];
$result = mysqli_query($conn,"SELECT * FROM categories where parent_id = $category_id");
?>
<option value="">Select SubCategory</option>
<?php
while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["category"];?></option>
<?php
}
?>

I hope it will help you

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]