Drop Down Issues [Archive] - WebDeveloper.com

fnbcprog

01-08-2003, 10:21 AM

Does anyone know how to code Javascript so that when someone has select a value from a dropdown box that different elements appear below it and disappear if something else is selected.

Such as:(just an example)

The form on has a dropdown.
The user selects McDonald's.
After selecting McDonalds a Drop Down Box appears that has SuperSize option.

The user then selects Burger King
After selecting McDonalds a Drop Down Box appears that has Biggie Size option.

If nothing is selected nothing can show (the default is nothing)

AdamBrill

01-08-2003, 02:47 PM

Try this:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language=javascript>
function show(element)
{
if(element.value=="McDonalds")
{
document.form1.D2.style.display="none";
document.form1.D3.style.display="inline";
}
else if(element.value=="BurgerKing")
{
document.form1.D3.style.display="none";
document.form1.D2.style.display="inline";
}
else
{
document.form1.D2.style.display="none";
document.form1.D3.style.display="none";
}
}
</script>
</head>

<body>

<form method="POST" name="form1">
<select onchange="show(this)" size="1" name="D1">
<option value="select">Please Select</option>
<option value="McDonalds">McDonalds</option>
<option value="BurgerKing">Burger King</option>
</select>
<br>
<select size="1" name="D2" style="display:none">
<option value="select">Please Select</option>
<option value="Choice1">SuperSize</option>
</select>
<br>
<select size="1" name="D3" style="display:none">
<option value="select">Please Select</option>
<option value="Choice1">Biggie Size</option>
</select>
</form>

</body>

</html>