Published: Sunday, October 10, 1999
Dependent List Boxes -
JavaScript & ASP Interaction
By Greg McCormick
Introduction
While developing a Classified Ads application I ran into an interesting issue while building the Submit a New Ad form. I wanted to assign a category and a subcategory to the ad (see an example). I was doing this by using two dropdown lists. The problem with doing this using ASP arises after you select your choice in the first list. Say you chose Automobiles. In the second list you have subcategories that contain everything but the kitchen sink. What you really want is only the Automobile related subcategories to show up in the list.
You can easily write a JavaScript list that when an option in the list A is selected list B shows only the items that are related to list A. This is a seemingly easy feat to pull off in JavaScript but what if you want to pull the information for the lists from a database? You could reload the page and populate the second list using the option selected from the first list. But what if you have already filled out other form objects such as text fields containing a description of the item you are selling, price, phone number, etc.? You have to reload the page sending that information in a query string then repopulate the form. Wouldn’t it be easier if you could just use JavaScript and ASP together to create the dependant lists? The code below is does just that.
The Database
The database that I am using has two tables that look like this:
| Category |
|---|
| Name | Properties | Description |
|---|
|
Category_id |
Autonumber |
Key of the table |
|
Category |
Text |
Name of the Category |
| SubCategory |
|---|
| Name | Properties | Description |
|---|
|
Subcategory_id |
Autonumber |
Key of the table |
|
Subcategory |
Text |
Name of the Subcategory |
|
Subcategory_of |
Number |
This category that this is a subcategory of. |
The Code
The code is quite lengthy. To view the code in text format,
click here!
How this works
The ASP code is executed and displayed in the browser as straight HTML so the JavaScript just executes as if the results from the ASP code were entered by hand. This is a very simple but under used theory. If you view the source of the example page you can see that the ASP loops through the recordset and writes the same JavaScript code for each item in the table. Here is an example of what that will look like:
x = 0
subcat = new Array();
subcatagorys = "Community Events"
subcatagoryof = "2" subcatagoryid = "2"
subcat[x,0] = subcatagorys;
subcat[x,1] = subcatagoryof;
subcat[x,2] = subcatagoryid;
if (subcat[x,1] == selecteditem){
var option0 = new Option(subcat[x,0], subcat[x,2]) inform.subcatagory.options[inform.subcatagory.length]=option0
}
x = 1
subcat = new Array();
subcatagorys = "Garage/Yard Sale"
subcatagoryof = "2"
subcatagoryid = "3"
subcat[x,0] = subcatagorys;
subcat[x,1] = subcatagoryof;
subcat[x,2] = subcatagoryid;
if (subcat[x,1] == selecteditem){
var option1 = new Option(subcat[x,0], subcat[x,2]) inform.subcatagory.options[inform.subcatagory.length]=option1
}
|
Happy Programming!
About the Author
I am a developer in Houston, TX and would be glad to answer any questions that I can about this article.
[Greg McCormick]
