<style type="text/css">
select { display: none; width: 150px; }
select.first { display: block; }
</style>
<form name="form" action="" method="post">
<div id="first">
First Item:
<select name="first" class="first" onchange="load('second', this.value);">
<option value="foods" />Foods
<option value="animals" />Animals
</select>
</div>
<div id="second">
Second Item: <select name="second" class="first"><option value="" /> </select>
<select name="foods" onchange="load('third', this.value);">
<option value="pizza" />Pizza
<option value="hamburger" />Hamburger
</select>
<select name="animals" onchange="load('third', this.value);">
<option value="kangaroo" />Kangaroo
<option value="giraffe" />Giraffe
</select>
</div>
<div id="third">
Third Item: <select name="second" class="first"><option value="" /> </select>
<select name="pizza" onchange="load('submit', '');">
<option value="pepperoni" />Pepperoni
<option value="cheese" />Cheese
</select>
<select name="hamburger" onchange="load('submit', '');">
<option value="nocheese" />No Cheese
<option value="cheese" />Cheese
</select>
<select name="kangaroo" onchange="load('submit', '');">
<option value="fat" />Fat
<option value="purple" />Purple
</select>
<select name="giraffe" onchange="load('submit', '');">
<option value="tall" />Tall
<option value="smelly" />Smelly
</select>
</div>
<div id="submit" style="display: none;">
<input type="submit" value="Submit" />
</div>
</form>
<script type="text/javascript">
function load(id, show) {
var divid = document.getElementById(id);
divid.style.display = 'block';
if (show != '') {
var selects = divid.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++) {
selects[i].style.display = 'none';
if (selects[i].name == show) {
selects[i].style.display = 'block';
}
}
}
}
</script>
