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:
 |
| Dependent Dropdown List with PHP, jQuery and Ajax |
Create a database called dependent_list. We will Create 2 tables: categories and subcategories with the following queries:
CREATE TABLE IF NOT EXISTS `categories` (
`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
mysql_connect('localhost', 'root', '');
mysql_select_db('dependent_dropdown_list');
?>
Next Create an index.php file in the project folder and add the following code:
<?php
include('config.php');
$query_parent = mysql_query("SELECT * FROM categories") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_cat").change(function() {
$.ajax({
type: "GET",
url: "loadsubcat.php",
data: {id:$(this).val()}
}).done(function( data ) {
$("#sub_cat").html(data);
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="parent_cat" id="parent_cat">
<option value="">Select Category</option>
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="sub_cat" id="sub_cat">
<option value="">Select Parent Category</option>
</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'];
$query = mysql_query("SELECT * FROM subcategories WHERE categoryID = {$parent_cat}");
while($row = mysql_fetch_array($query)) {
echo "<option value='$row[id]'>$row[subcategory_name]</option>";
}
?>
Hope this php tutorial is useful for you. Keep following Php Point for more Codes.
