Creating a Dependent Dropdown List with PHP, jQuery and Ajax.

There are times in a web application where you want to populate a dropdown list based on the value of another drop down list. Scenarios like this can be populating a Country’s State dropdown based on the value of the Country selected, populating product sub-categories based on the parent category. In this example, we will be creating a dropdown list for category/subcategory for a product in an eCommerce website. Create a database called dependent_list. We will Create 2 tables: categories and subcategories with the following queries: Some data has been inserted into both tables as shown in database. categoryID is a foreign key in subcategories table i.e 1 category has multiple subcategories. Create a project folder called ‘dependent_list’ in your site root folder. Create a config.php file to store the database connection and add the following code: Next Create an index.php file in the project folder and add the following code: On line 3, we queried our categories table to get all categories. We then populate the parent_cat dropdownlist with the categories on lines 33-37. Whenever the dropdown value for category is changed, a jquery changed event is triggered for the category dropdown list on line 10. On lines 10-18,it sends the id value of the selected category through jquery Ajax to a php script called loadsubcat.php which then queries the subcategories table for subcategories that belongs to the parent category id value using $_GET[] super global . The values returned is now appended to the sub_cat dropdown list. We also added an animated loading gif for user experience, it is displayed when the a value is selected for the parent category and removed using a jquery “slideUp” method after the subcategory has been populated. Lastly, create a loadsubcat.php file in the project folder and add the following code. Now go to http://localhost/dependent_list and you will see how the dependent dropdownlist works