How to make a dependent dropdown list using jquery Ajax Download

How to make a dependent dropdown list using jquery Ajax, Mysql and PHP PDO, Download full source code

In this tutorial, We will be going to explain How to make a dependent dropdown list using jquery Ajax, Mysql and PHP PDO.

Sometimes we require to make a dependent dropdown list like when you select the category at the same time sub-category will auto-populate in the second dropdown list, It means related to the selected category.

How to make a dependent dropdown list using jquery Ajax, Mysql and PHP PDO

So, when the user will select the category from the category dropdown, the Subcategory will automatically populate in the second dropdown list from the MySQL database. You can implement this example in your web application by following bellow few steps. First, we need to create a database and two tables Category and Subcategory table for the dependent dropdown list using jquery.

So we need to create a database using the below MySQL Command.

dependent dropdown list

After creating the successful database, We need to create the below two tables Category and SubCategory using the below MySQL Command.

1. Create the Category Table

How to make a dependent dropdown list

2. Create the Subcategory Table

Auto Populated dependent dropdown list

After creating the successful two tables, we need to add some categories and subcategories records into the database.

3. Create the HTML Form index.php

We need to create two dropdown lists. The HTML code looks like below.

4. Create the javascript

How to load category dependent drop-down list using jQuery AJAX

The categoryLst() function has the parameter value containing the category id. This parameter is for constructing the AJAX request data.

The PHP code will get the records from the subcategory table on the sent category id from the database.

In the below AJAX code, the dependent subcategory dropdown list will get an auto-populated value with the response HTML returned from the PHP code. Download jQuery

Dependent dropdown list

5. Create the DBConfig.php file

Now we need to create a DB configuration file for database connectivity. The DB configuration file looks like.

6. Create the subcatg.php file

The subcatg.php file has the function to get all subcategory from the database based on the category id.

Conclusion

Hope the above example will help you to make a dependent dropdown list using jquery Ajax, Mysql, and PHP PDO.

make a dependent dropdown list using jquery Ajax, Mysql, and PHP PDO

The source code and the download link for “How to make a dependent dropdown list using jquery Ajax” given below.