Two Dependent Dropdown In PHP – How to make dependent dropdown list using jquery Ajax?

two dependent dropdown in php – Dependent Drop-down List in PHP using jQuery AJAX with Category SubCategory Example

Two Dependent Dropdown In PHP

1.itsolutionstuck_category
2.itsolutionstuck_subcategory

Step 1: Create Tables and Dummy Data

itsolutionstuck_category table:

CREATE TABLE `itsolutionstuck_category` (
  `id` int(11) NOT NULL,
  `name` varchar(155) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

itsolutionstuck_subcategory table:

CREATE TABLE `itsolutionstuck_subcategory` (

  `id` int(11) NOT NULL,
  `category_id` int(12) NOT NULL,
  `name` varchar(155) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2: Create index.php file

index.php

<!DOCTYPE html>
<html>
<head>
    <title>PHP - How to make dependent dropdown list using jquery Ajax? - itsolutionstuck.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://itsolutionstuck.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>


<div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">Select Category and get bellow Related Sub Category</div>
      <div class="panel-body">
            <div class="form-group">
                <label for="title">Select Category:</label>
                <select name="category" class="form-control">
                    <option value="">--- Select Category ---</option>


                    <?php
                        require('db_config.php');
                        $sql = "SELECT * FROM itsolutionstuck_category"; 
                        $result = $mysqli->query($sql);
                        while($row = $result->fetch_assoc()){
                            echo "<option value='".$row['id']."'>".$row['name']."</option>";
                        }
                    ?>


                </select>
            </div>


            <div class="form-group">
                <label for="title">Select Sub Category:</label>
                <select name="sub_cat" class="form-control" style="width:350px">
                </select>
            </div>


      </div>
    </div>
</div>


<script>
$( "select[name='category']" ).change(function () {
    var categoryID = $(this).val();


    if(categoryID) {


        $.ajax({
            url: "ajaxpro.php",
            dataType: 'Json',
            data: {'id':categoryID},
            success: function(data) {
                $('select[name="sub_cat"]').empty();
                $.each(data, function(key, value) {
                    $('select[name="sub_cat"]').append('<option value="'+ key +'">'+ value +'</option>');
                });
            }
        });


    }else{
        $('select[name="sub_cat"]').empty();
    }
});
</script>


</body>
</html>

Step 3: Add DB Configuration File

db_config.php

<?php
define (DB_USER, "itsolutionstuck");
define (DB_PASSWORD, "[email protected]");
define (DB_DATABASE, "itsolutionstuck");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
?>

Step 4: Add Ajax File

ajaxpro.php

<?php
   require('db_config.php');
   $sql = "SELECT * FROM itsolutionstuck_subcategory
         WHERE category_id LIKE '%".$_GET['id']."%'"; 


   $result = $mysqli->query($sql);

   $json = [];
   while($row = $result->fetch_assoc()){
        $json[$row['id']] = $row['name'];
   }

   echo json_encode($json);
?>

Leave a Reply

Your email address will not be published.