i need to write a form with multiple options for example:

in the first option they select red, blue, or yellow

if they select red they will then see burgundy, scarlet or ruby

if they then select ruby they will see costume jewellery or precious jewellery

i have been able to do this so i can select red and then see burgundy, scarlet or ruby but cant work out how to categorise this further

Can anyone help?


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dropdownlist(listindex2)

document.formname.funcarea.options.length = 0;
switch (listindex2)

case "Red" :
document.formname.funcarea.options[0]=new Option("Select Functional Area","");
document.formname.funcarea.options[1]=new Option("burgundy","burgundy");
document.formname.funcarea.options[2]=new Option("scarlet","scarlet");
document.formname.funcarea.options[3]=new Option("ruby","ruby");


return true;
<title>colour Form</title>

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<td width="41%" align="right" valign="middle">Colour :</td>
<td width="59%" align="left" valign="middle"><select name="dept" id="dept" onchange="java script: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Colour</option>
<option value="Red">Red</option>
<td align="right" valign="middle">
Sub Colour:
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="funcarea"><option value="">Select Sub Colour</option></select>')
<noscript><select name="funcarea" id="funcarea" >
<option value="">Select Sub Colour</option>