Hierarchial Drop Down lists

[tribolic]

What I need to do is have an html page that has a drop down list of items and when the user selects an item, another list that relates only to the selected item in the first list is displayed. Then when they select an item from the second list, a third list of items only relating to the selected item in list2 is displayed. And finally when they select an item in the third list, the submit button is available.

I have seen javascript that does something like this...
(taken from jello.com's recipe search function)

The list would have onclick="CheckSubmit('6')
and CheckSubmit would be something like...

function CheckSubmit(item){
document.form1.valid.value = "0";
document.form1.submit();
}

Which I assume would submit the form and a behind the scenes app would pass back a screen that now has the second list and continue in this fashion.

But is there an easier way that I can just stay on the same form and dynamically keep building html for the list via java or is that impossible.

Thanks for any help.

[ray326]

You could put everything you need on the form, inclosed in divs and initially hidden. Then you can make the appropriate divs visible as the selection process moves forward.

Frankly, I'd rather do this with server-side code.

[tribolic]

I found the answer myself.
For anyone who is battling the same issue, here is the simple solution.

Using 3 dropdown lists called List1, List2 and List3.
Put an 'OnChange' on each. ( I am only showing the relevent html )

<select size='1' name='List1' OnChange='LoadList2()'>
<select size='1' name='List2' OnChange='LoadList3()'>

This will cause LoadList2 to be called whenever the user selects a new item in List1.

Now for the java function. Just do similar for LoadList3

function LoadList2() {

//you would have to change forms[0] to be the correct form
//if there is more than 1
var List1Work = document.forms[0].elements['List1'];
var List2Work = document.forms[0].elements['List2'];

//remove any existing entries in List2
for (var i = List2Work.length;i > 0;i--)
List2Work.options[0] = null;

//add a none entry is desired
var OptionName = new Option('NONE', 'NONE', true, false);
var length = List2Work.length;
List2Work.options[length] = OptionName;

//get the selected item in List1
var List1Text = List1Work.options[List1Work.selectedIndex].value;

//load the entries into List2
//you could use an array but for simplicity Ill use a switch statement
switch(List1Text)
{
case "Item1" :

var OptionName = new Option("Item 1 Sub Option 1","Item 1 Sub Option 1", false, false);
var length = List2Work.length;
List2Work.options[length] = OptionName;

var OptionName = new Option("Item 1 Sub Option 2","Item 1 Sub Option 2", false, false);
var length = List2Work.length;
List2Work.options[length] = OptionName;

break;

case "Item2" :

var OptionName = new Option("Item 2 Sub Option 1","Item 1 Sub Option 1", false, false);
var length = List2Work.length;
List2Work.options[length] = OptionName;

var OptionName = new Option("Item 2 Sub Option 2","Item 1 Sub Option 2", false, false);
var length = List2Work.length;
List2Work.options[length] = OptionName;

break;

default:
//do whatever you need to do for an unrecognized value in List1
}

List2Work.options[0].selected = true;
return true;

}