Dependent Dropdown In Php

dependent dropdown in php using ajax is the most popular feature of Web development. jQuery AJAX request parse the JSON response and convert it into an array.

Contents

HTML form with dependent dropdown select box is used to auto-populate the dependent data in the dropdown list.

Step 1: Create Tables and Dummy Data

CREATE TABLE `example_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;

example_sub_cat table:

CREATE TABLE `example_sub_cat` (
  `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;

Now, in your database, you will have two tables “example_category” and “example_sub_cat”. Now we require to add some dummy data in both table like as bellow image.

Step 2: Create index.php file




    PHP - How to make dependent dropdown list using jquery Ajax? - www.pakainfo.com
    
    
    





    
      Select category and get bellow Related sub_cat
      
            
                Select category:
                
            


            
                Select sub_cat:

Step 3: Add DB Configuration File

connect_db.php

Don’t Miss : Dependent Dropdown Example In PHP MySQL

Step 4: Add Ajax File

do_process.php

query($sql);

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

   echo json_encode($json);
?>

Example 2 : dynamic dependent select box using jquery and ajax

Creating a dynamic dependent select box using jQuery and Ajax involves the following steps:

HTML: Create an HTML form with two select boxes – one for the parent category and one for the child category. For example:


  Parent Category:
  
  

  Child Category:

JavaScript: Use jQuery to handle the change event of the parent category select box, and send an Ajax request to fetch the child categories from the server. For example:

$(document).ready(function() {
  $('#parent_category').on('change', function() {
    var parent_id = $(this).val();
    if (parent_id) {
      $.ajax({
        url: 'get_child_categories.php',
        type: 'POST',
        data: { parent_id: parent_id },
        success: function(data) {
          $('#child_category').html(data);
        }
      });
    } else {
      $('#child_category').html('');
    }
  });
});

In the above code, we use jQuery to handle the change event of the parent category select box. When the user selects a parent category, we get its value and send an Ajax request to a PHP script called get_child_categories.php. The data parameter of the Ajax request contains the parent_id value.

The PHP script retrieves the child categories from the database, based on the parent_id, and returns an HTML string containing the option elements for the child category select box.

When the Ajax request is successful, we replace the contents of the child category select box with the HTML string containing the child categories.

If the user selects the default option of the parent category select box (i.e., no parent category selected), we reset the child category select box to its default value.

I hope you get an idea about dependent dropdown in php.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

dependent dropdown in php – How to make dependent dropdown list using jquery Ajax?