II MR V1K1NG II
Hardware Engineer
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
500 XP
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
Download
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_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() {
- $(this).after('<div
id
=
"loader"
><img
src
=
"img/loading.gif"
alt
=
"loading subcategory"
/
></
div
>
');
- $.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"
>
- <label
for
=
"category"
>
Parent Category</
label
>
- <select
name
=
"parent_cat"
id
=
"parent_cat"
>
- <?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"
></
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>"
;
- }
- ?>
Now go to http://localhost/dependent_list and you will see how the dependent dropdownlist works
Download
You must upgrade your account or reply in the thread to view hidden text.