I have four drop-down boxes, three of which are set to visibility:hidden. I need it so that when I select an option from the first box (the visible one), one of the next two boxes appears (depending on which option is picked) and when I pick an option in that box, the last box appears. One of the middle two boxes will still be hidden. However, when I change the first selection nothing happens. I would really appreciate if someone could help me out with this.
Thanks in advance!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div.c1 {visibility:hidden}
</style>
<script type="text/javascript">
function showL() {
var season = document.getElementById('season');
var lengthp = document.getElementById('lengthp');
var lengtho = document.getElementById('lengtho');
if (season.selectedIndex == '0') {
lengtho.style.visibility = "hidden";
lengthp.style.visibility = "hidden";
alert('showL 0');
}
if (season.selectedIndex == '1') {
lengthp.style.visibility = "visible";
alert('showL peak');
}
if (season.selectedIndex == '2') {
lengtho.style.visibility = "visible";
alert('showL off');
}
}
function showPp() {
var lengthp = document.getElementById('lengthp');
var pet = document.getElementById('pet');
if (lengthp.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengthp.selectedIndex != '0') {
pet.style.visibility = "visible";
}
}
function showPo() {
var lengtho = document.getElementById('lengtho');
var pet = document.getElementById('pet');
if (lengtho.selectedIndex == '0') {
pet.style.visibility = "hidden";
}
if (lengtho.selectedIndex != '0') {
pet.style.visibility = "visible";
}
}
</script>
</head>
<body>
<div id="season">
<select name="season" onChange="showL();">
<option value="0">Select One</option>
<option value="peak">Peak Season</option>
<option value="off">Off Season</option>
</select>
</div>
<div id="lengthp" class="c1">
<select name="lengthp" onChange="showPp();">
<option value="0">Select One</option>
<option value="2">2 Days</option>
<option value="3">3 Days</option>
<option value="4">4 Days</option>
<option value="5">5 Days</option>
<option value="6">6 Days</option>
<option value="7">1 Week</option>
</select>
</div>
<div id="lengtho" class="c1">
<select name="lengtho" onChange="showPo();">
<option value="0">Select One</option>
<option value="2">2 Days</option>
<option value="3">3 Days</option>
<option value="4">4 Days</option>
<option value="5">5 Days</option>
<option value="6">6 Days</option>
<option value="7">1 Week</option>
</select>
</div>
<div id="pet" class="c1">
<select name="pet">
<option value="0">Select One</option>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
</body>
</html>
Before you post, read our: 
