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:
`id` INT(11) NOT NULL AUTO_INCREMENT,
`category_name` VARCHAR(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB;
CREATE TABLE IF NOT EXISTS `subcategories` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`categoryID` INT(11) NOT NULL,
`subcategory_name` VARCHAR(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB;
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:
-
<?php
-
?>
Next Create an index.php file in the project folder and add the following code:
-
<?php
-
include(‘config.php’);
-
?>
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset=“utf-8”>
-
<script type=“text/javascript”>
-
$(document).ready(function() {
-
$(“#parent_cat”).change(function() {
-
$.get(‘loadsubcat.php?parent_cat=’ + $(this).val(), function(data) {
-
$(“#sub_cat”).html(data);
-
$(‘#loader’).slideUp(200, function() {
-
$(this).remove();
-
});
-
});
-
});
-
});
-
</script>
-
</head>
-
<body>
-
<form method=“get”>
-
<select name=“parent_cat” id=“parent_cat”>
-
<?php while($row = mysql_fetch_array($query_parent)): ?>
-
<?php endwhile; ?>
-
</select>
-
</form>
-
</body>
-
</html>
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.
-
<?php
-
include(‘config.php’);
-
$parent_cat = $_GET[‘parent_cat’];
-
echo “<option value=’$row[id]‘>$row[subcategory_name]</option>”;
-
}
-
?>
Now go to http://localhost/dependent_list and you will see how the dependent dropdownlist works
Problems on Information and Computer Technology 