Option 2 change based on Option 1

I am working on trying to get a menu option to change based on what another menu option is. I am working on a page that would allow a user to select fluid types for vehicle. I have it working so that the user can select Antifreeze, Motor Oil, Brake Fluid, etc... & then the 2nd menu shows the different brands of Antifreeze, Motor Oil, Brake Fluid, etc... This works just fine...

I now want a 3rd menu to changed based on the brand name chosen. Like when the user clicks the Motor Oil the brands of motor oils appears in the 2nd drop down menu. I want the 3rd menu to display based on the brand that is in the 2nd menu. Like when they choose Motor Oil brand Castrol. The 3rd menu shows the different castrol's lines & oil weights.

This is the coding that I have that doesn't work on the 3 menu. The 2nd menu populates just fine. The values aren't finished. I want to get the functionality working first.

<form action="action.php?do=maintain" method="post" name="maintain_vehicle" id="maintain_vehicle">
<div align="center"> <br>
</div>
<table width="580" height="137" border="1" align="center" bordercolor="#0000FF">
<tr bgcolor="#F2F2F2">
<td height="39" colspan="3"><div align="center">Select the vehicle you want to maintain! </div></td>
</tr>
<tr>
<td height="44" colspan="3" bgcolor="#DAFCFA"> <div align="center">
<select name="vehicle_choosen" id="vehicle_choosen">
<OPTION SELECTED VALUE="">Choose Vehicle to Maintain...
<?php require("cdb.php");
$query_vehicle = mysql_query("SELECT * FROM vehicles ORDER BY `vehicle_year` DESC");
while ($row = mysql_fetch_array($query_vehicle)) {
$vehicle_year = $row["vehicle_year"];
$vehicle_make = $row["vehicle_make"];
$vehicle_model = $row["vehicle_model"];
$vehicle_vin = $row["vehicle_vin"];
?>
<option value="<? echo $vehicle_vin; ?>"> <? echo $vehicle_year; ?> &nbsp; <? echo $vehicle_make; ?> &nbsp; <? echo $vehicle_model; ?>
<? } ?>
</option>
</select>
</div></td>
</tr>
<tr>
<td width="148" height="44" bgcolor="#DAFCFA">
<div align="center"><?php require("maintenance/fluids.php"); ?> </div></td>
<td width="151" bgcolor="#DAFCFA">
<div align="center"><select name="fluid_brand" size="1" id="fluid_brand" onchange="setOptions(document.maintain_vehicle.fluid_brand.options[document.maintain_vehicle.fluid_brand.selectedIndex].value);">
<option value=" " selected="selected">Choose Fluid Brand...</option>
</select></div></td>
<td width="130" bgcolor="#DAFCFA">
<div align="center">
<select name="fluid_weight" size="1" id="fluid_weight" onchange="setFluid_weight(document.maintain_vehicle.fluid_weight.options[document.maintain_vehicle.fluid_weight.selectedIndex].value);">
<option value=" " selected="selected">Choose Fluid Weight...</option>
</select>
</div></td>
</tr>
</table>
<br>
<div align="center">
<input name="maintain" type="submit" id="maintain" value="Save">
<br>
</div>
</form>

This is in the header...<script type="text/javascript">
<!-------START FLUID TYPES----------------->
function setFluids(chosen) {
var selbox = document.maintain_vehicle.fluid_brand;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Antifreeze") {
selbox.options[selbox.options.length] = new Option('Peak', 'Peak');
selbox.options[selbox.options.length] = new Option('Super Tech', 'Super Tech');

}
if (chosen == "Motor Oil") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Valvoline','Valvoline');
selbox.options[selbox.options.length] = new Option('Kendall','Kendall');
selbox.options[selbox.options.length] = new Option('Royal Purple','Royal Purple');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Havoline','Havoline');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Motorcraft','Motorcraft');
}
if (chosen == "Power Steering Fluid") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Advance Brand','Advance Brand');
selbox.options[selbox.options.length] = new Option('C30 Pickup', 'C30 Pickup');
selbox.options[selbox.options.length] = new Option('Impala','Impala');
}

}
<!--------------END FLUID TYPES------------------>
<!-----------START FLUID WEIGHTS----------------->
function setFluid_weight(chosen) {
var selbox = document.maintain_vehicle.fluid_weight;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Peak") {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Super Tech") {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Castrol") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Valvoline','Valvoline');
selbox.options[selbox.options.length] = new Option('Kendall','Kendall');
selbox.options[selbox.options.length] = new Option('Royal Purple','Royal Purple');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Havoline','Havoline');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Motorcraft','Motorcraft');
}
if (chosen == "Power Steering Fluid") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Advance Brand','Advance Brand');
selbox.options[selbox.options.length] = new Option('C30 Pickup', 'C30 Pickup');
selbox.options[selbox.options.length] = new Option('Impala','Impala');
}

}
<!--------------END FLUID WEIGHTS------------------>
</script>

seems fine you just need to define all the options

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/javascript">
<!-------START FLUID TYPES----------------->
function setFluids(chosen) {
var selbox = document.maintain_vehicle.fluid_brand;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Antifreeze") {
selbox.options[selbox.options.length] = new Option('Peak', 'Peak');
selbox.options[selbox.options.length] = new Option('Super Tech', 'Super Tech');

}
if (chosen == "Motor Oil") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Valvoline','Valvoline');
selbox.options[selbox.options.length] = new Option('Kendall','Kendall');
selbox.options[selbox.options.length] = new Option('Royal Purple','Royal Purple');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Havoline','Havoline');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Motorcraft','Motorcraft');
}
if (chosen == "Power Steering Fluid") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Advance Brand','Advance Brand');
selbox.options[selbox.options.length] = new Option('C30 Pickup', 'C30 Pickup');
selbox.options[selbox.options.length] = new Option('Impala','Impala');
}

}
<!--------------END FLUID TYPES------------------>
<!-----------START FLUID WEIGHTS----------------->
function setFluid_weight(chosen) {
var selbox = document.maintain_vehicle.fluid_weight;
alert(chosen)
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Peak") {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Super Tech") {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Castrol") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Valvoline','Valvoline');
selbox.options[selbox.options.length] = new Option('Kendall','Kendall');
selbox.options[selbox.options.length] = new Option('Royal Purple','Royal Purple');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Havoline','Havoline');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Motorcraft','Motorcraft');
}
if (chosen == "Power Steering Fluid") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Advance Brand','Advance Brand');
selbox.options[selbox.options.length] = new Option('C30 Pickup', 'C30 Pickup');
selbox.options[selbox.options.length] = new Option('Impala','Impala');
}

}
<!--------------END FLUID WEIGHTS------------------>
</script> </head>

<body>
<form name="maintain_vehicle">
<select name="" onchange="setFluids(this.value);">
<option value="Antifreeze" >Antifreeze</option>
<option value="Motor Oil" >Motor Oil</option>
<option value="Power Steering Fluid" >Power Steering Fluid</option>
</select>
<select name="fluid_brand" onchange="setFluid_weight(this.value);">
</select>
<select name="fluid_weight" >
</select>
</form>
</body>

</html>

see

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f14

seems fine you just need to define all the options

see

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f14
Are you are talking about the options that shows in the drop down menu? If so, then it should be showing the options that I currently have typed in. It isn't showing anything in the 3rd menu...not even the wrong options.

well I dont understand then

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/javascript">
function setFluid_weight(chosen) {
var selbox = document.maintain_vehicle.fluid_weight;
chosen=chosen.toLowerCase();
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Peak".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Super Tech".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Castrol".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Valvoline','Valvoline');
selbox.options[selbox.options.length] = new Option('Kendall','Kendall');
selbox.options[selbox.options.length] = new Option('Royal Purple','Royal Purple');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Havoline','Havoline');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Motorcraft','Motorcraft');
}
if (chosen == "Power Steering Fluid".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Advance Brand','Advance Brand');
selbox.options[selbox.options.length] = new Option('C30 Pickup', 'C30 Pickup');
selbox.options[selbox.options.length] = new Option('Impala','Impala');
}

}
<!--------------END FLUID WEIGHTS------------------>
</script> </head>

<body>
<form name="maintain_vehicle">
<select name="fluid_weight" style="width:200px;" >
</select>
<input onkeyup="setFluid_weight(this.value);" >
</form>
</body>

</html>

Let me start over with my problem. This part of the code works & populates the fields just fine I makes the menu 2 populate just fine...<!-------START FLUID TYPES----------------->
function setFluids(chosen) {
var selbox = document.maintain_vehicle.fluid_brand;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Antifreeze") {
selbox.options[selbox.options.length] = new Option('Peak', 'Peak');
selbox.options[selbox.options.length] = new Option('Super Tech', 'Super Tech');

}
if (chosen == "Motor Oil") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Valvoline','Valvoline');
selbox.options[selbox.options.length] = new Option('Kendall','Kendall');
selbox.options[selbox.options.length] = new Option('Royal Purple','Royal Purple');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Havoline','Havoline');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Motorcraft','Motorcraft');
}
if (chosen == "Power Steering Fluid") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Advance Brand','Advance Brand');
}

}
<!--------------END FLUID TYPES------------------>Those options in the code above will display if they choose Antifreeze then in the second menu it displays the 2 options Peak & Super Tech. I want the 3rd menu to display different options bases on if they choose Peak or Super Tech.

This is the code that I have to make the 3rd menu display options. It isn't working thou.<!-----------START FLUID WEIGHTS----------------->
function setFluid_weight(chosen) {
var selbox = document.maintain_vehicle.fluid_weight;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Peak") {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Super Tech") {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Castrol") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Valvoline','Valvoline');
selbox.options[selbox.options.length] = new Option('Kendall','Kendall');
selbox.options[selbox.options.length] = new Option('Royal Purple','Royal Purple');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Havoline','Havoline');
selbox.options[selbox.options.length] = new Option('Quaker State','Quaker State');
selbox.options[selbox.options.length] = new Option('Motorcraft','Motorcraft');
}
if (chosen == "Pennzoil") {
selbox.options[selbox.options.length] = new Option('Castrol','Castrol');
selbox.options[selbox.options.length] = new Option('Pennzoil','Pennzoil');
selbox.options[selbox.options.length] = new Option('Advance Brand','Advance Brand');
}
}
<!--------------END FLUID WEIGHTS------------------>
In the php file this is what I have for the menu code<select name="fluid_brand" size="1" id="fluid_brand" onchange="setOptions(document.maintain_vehicle.fluid_brand.options[document.maintain_vehicle.fluid_brand.selectedIndex].value);">
<option value=" " selected="selected">Choose Fluid Brand...</option>
</select></div></td>
<td width="130" bgcolor="#DAFCFA">
<div align="center">
<select name="fluid_weight" size="1" id="fluid_weight" onchange="setFluid_weight(document.maintain_vehicle.fluid_weight.options[document.maintain_vehicle.fluid_weight.selectedIndex].value);">
<option value=" " selected="selected">Choose Fluid Weight...</option>
</select>
Thanks for your help vwphillips!!

if (chosen == "Peak") {
selbox.options[selbox.options.length] = new Option('Peak50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('Peak50/50 Red', '50/50 Red');

}
if (chosen == "Super Tech") {
selbox.options[selbox.options.length] = new Option('Super Tech50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('Super Tech50/50 Red', '50/50 Red');

}

Did you leave something out of your reply? You just quoted my code exactly like I have it.

not the same

but both options were so you did not see the change


seems fine you just need to define all the options

I tried adding this.toLowerCase().substring(0,chosen.length) & it didn't help. I was referring to that quote you made of my code was the same as what I had.

eferring to that quote you made of my code was the same as what I had.
NO IT IS NOT

I have this for my code. This is the code that you suggested. I have looked it over & don't see anything wrong. It is still not working...I finished my options like you suggested to...
<!-----------START FLUID WEIGHTS----------------->
function setFluid_weight(chosen) {
var selbox = document.maintain_vehicle.fluid_weight;
chosen=chosen.toLowerCase();
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Choose Fluid Weight...');

}
if (chosen == "Peak".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Super Tech".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('50/50 Green', '50/50 Green');
selbox.options[selbox.options.length] = new Option('50/50 Red', '50/50 Red');

}
if (chosen == "Castrol".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('10W30','10W30');
selbox.options[selbox.options.length] = new Option('10W40','10W40');
selbox.options[selbox.options.length] = new Option('20W50','20W50');
selbox.options[selbox.options.length] = new Option('5W20','5W20');
selbox.options[selbox.options.length] = new Option('5W30','5W30');
selbox.options[selbox.options.length] = new Option('5W40','5W40');
}
if (chosen == "Pennzoil".toLowerCase().substring(0,chosen.length)) {
selbox.options[selbox.options.length] = new Option('10W40','10W40');
selbox.options[selbox.options.length] = new Option('20W50','20W50');
selbox.options[selbox.options.length] = new Option('5W30','5W30');
}
}
<!--------------END FLUID WEIGHTS------------------>