If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Creating Multiple Selection Drop-Downs Based on Previous Selection

So I'm new at html and javascript and I'm trying to create a page where you users have to make multiple selections that are based on each other. How do you create a form such that a specific type of dropdown menu #3 appears based on the user's selection in dropdown menu #2 and specific type of dropdown menu #2 appears based on the user's selection in dropdown menu #1.

For example, lets say a user has to choose a "product category" and a "product subcategory". If a user chooses "shoes" from the first drop down menu, a second drop-down menu automatically appears with choices like "nike, adidas, puma".

To further this example, lets say the user chose "computers" instead of "bedding." Then the second-drop down menu would have choices like "sony, dell, apple".

Following the third-drop down menu would have options based upon the second-drop menu. For example, after selecting apple, the drop-down menu will show "MacBook Air, MacBook Pro, iMac"

How would one go about doing something like that? Is it something you would do in HTML/CSS or some other form?

Thanks for the help!

Note: I have some of the coding for when you have just two drop down menus, but how do you add another drop down menu to have in total 3 drop-down menus.

This CSS3 script can handle infinite sub menus (well, I have got up to six layers so far) using a ul and li tagged menu nested in an HTML5 nav tag. I found this looking for CSS3 scripts to eliminate differences in the ways different browsers render HTML and to allow Non-HTML5 compatible browsers to render the new elements correctly. here is the relevant excerpt:

There are some style elements in there you can easily adjust for your own uses. I find that this is easier that the CSS3Menu product the is out there, and more customizable. This round some borders, that can be eliminated, just experiment and adjust it to your needs!