DEV Community


Category Subcategory Dropdown In PHP MySQL Ajax With Example

robertlook profile image Robert Look ・2 min read

Sometimes, you need to select a query in PHP so we create separate tables to display selected subcategories based on selected category dropdowns. But in this tutorial, we will use/learn only a single table use (category and subcategory in one table) for a PHP dynamic fetch data from database in dropdownlist in PHP.

Category Subcategory Dropdown In PHP MySQL Ajax With Example

<!DOCTYPE html>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Dynamic Category Subcategory Dropdown in PHP MySQL Ajax -</title>
      <!-- Fonts -->
      <link href=",600" rel="stylesheet">
      <!-- Styles -->
      <link rel="stylesheet" href="" >
      <script src=""></script>
         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;
      <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">Category Subcategory Dropdown in PHP MySQL Ajax -</h2>
                  <div class="card-body">
                        <div class="form-group">
                           <label for="CATEGORY-DROPDOWN">Category</label>
                           <select class="form-control" id="category-dropdown">
                              <option value="">Select Category</option>
                                 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>
                        <div class="form-group">
                           <label for="SUBCATEGORY">Sub Category</label>
                           <select class="form-control" id="sub-category-dropdown">
         $(document).ready(function() {
    $('#category-dropdown').on('change', function() {
        var category_id = this.value;
            url: "fetch-subcategory-by-category.php",
            type: "POST",
            data: {
                category_id: category_id
            cache: false,
            success: function(result) {
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Editor guide