Cascading Dropboxes

Ever wanting to make a dynamic, multi-level dropbox in HTML using javascript? Well I am here to give you some resources and knowledge to help you out. I wanted to a cascading or hierarchical navigation in my group project as a way to give the user selection options based on what they initially picked, to help narrow down their secondary and tertiary choices. These types of dropdowns are quite common on the web and a must have for any good web programmer.

I will show how to make a simple two-level, static dropbox. You could make them dynamic with the use of dynamic lookups from a database file or other related search, but that gets pretty in-depth and I don’t want to overwhelm anyone.

Our first dropbox allows the user to select either “search engines” or “browsers”. Based on which they choose the second dropbox will give them choices of “Google” or “MSN” for search tools and “Firefox” or “Opera” for browser choices, but not all four. When the user makes their selection from the second dropbox a new window will open up and load the webpage for their choice.

First we need to make a simple dropbox as shown here:


This code generates the initial dropbox and based on the selection from this dropbox determines what list goes into the second dropbox. Now to create the code that will populate the second dropbox. See below:


As you can see we basically have a simple case statement that takes the users selection text and based on what they select fills in the second dropbox with one list or the other. It is really an Options list in JSON format.

But the key to linking these two together is in the following code:


The working version can be seen here: http://people.emich.edu/jaltmann/blogs/Dropboxes.html

I have left the javascript all within the HTML so that the code can easily be reviewed and utilized as freeware. One can easily manipulate this code to cascade into more levels of dropboxes as neede