When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips

Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
Print this page.
Published: Sunday, October 10, 1999

Dependent List Boxes - JavaScript & ASP Interaction
By Greg McCormick

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.

- continued -

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_id Autonumber Key of the table
Category Text Name of the Category

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]

ASP.NET [1.x] [2.0] | ASPFAQs.com | Advertise | Feedback | Author an Article