Dynamisches Auswahl Menü

[dirtysouth]

Hallo
möchte ein Dynamisches Auswahlmenü erstellen. Der Kunde muss als erstes die Produktgruppe auswählen und danach das passende Produkte, über den Button weiter soll er dann auf die dementsprechende Seite kommen.

Also das Auswahlmenü funktioniert, hab das ganze über ein Dynamisches Formular geregelt (macht das sinn oder gibts da was besseres???)

jetzt sollte man bei klick auf den Button weiter auf die entsprechende Seite kommen ...da weiss ich jetzt leider nicht mehr weiter ...kann mir einer von euch helfen ??

Hier der JS Code
<script language="JavaScript1.1" type="text/javascript"><!--
function update_auswahl()
 {
  var kategorieAuswahl = document.forms.verzeichnis.Produktgruppen;
  var unterkategorieAuswahl = document.forms.verzeichnis.Produkte;
  unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren

if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "Subsystems")
   {
    unterkategorieAuswahl.options[0] = new Option("ALADDIN","ALADDIN");
    unterkategorieAuswahl.options[1] = new Option("spectron","spectron");
    unterkategorieAuswahl.options[2] = new Option("CO230W","CO20W");
    unterkategorieAuswahl.options[3] = new Option("CAIMAN","CAIMAN");
    unterkategorieAuswahl.options[4] = new Option("CROCODILE","CROCODILE");
    enable();
   }
  else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "System")
   {
    unterkategorieAuswahl.options[0] = new Option("ASCseries","ASCseries");
    unterkategorieAuswahl.options[1] = new Option("SCseries","SCseries");
    unterkategorieAuswahl.options[2] = new Option("NCCseries","NCCseries");
    enable();
   }
  else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "ScanHeads")
   {
    unterkategorieAuswahl.options[0] = new Option("basic scenarios","basicscenarios");
    unterkategorieAuswahl.options[1] = new Option("WASP","WASP");
    unterkategorieAuswahl.options[2] = new Option("DRAGONFLY","DRAGONFLY");
    enable();
   }
  else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "default")
   {
    disable();
   }
 }

function enable()
 {
  if (document.all || document.getElementById)
   {
    if (document.verzeichnis.Produkte.disabled == true)
     {
      document.verzeichnis.Produkte.disabled = false;
      document.verzeichnis.Submit.disabled = false;
     }
   }
 }

function disable()
 {
  if (document.all || document.getElementById)
   {
    if (document.verzeichnis.Produkte.disabled == false)
     {
      document.verzeichnis.Produkte.disabled=true;
     }
   }
 }

function callPage()
 {
  var unterkategorieAuswahl = document.forms.verzeichnis.Produkte;
  location.href = "../vorlesungen/" + unterkategorieAuswahl.options[unterkategorieAuswahl.selectedIndex].value + ".html";
 }
// --> </script>

Und hier das HTML:

<b>Bitte passendes Produkt auswählen</b>
<form name="verzeichnis" method="post" action="javascript:callPage();" onsubmit="javascript:message();">
<table summary="">
<tr>
<td><label for="Produktgruppen">Produktgruppen</label>:</td>
<td>
<select size="1" name="Produktgruppen" onchange="update_auswahl();" id="Produktgruppen">
<option value="default" selected="selected">Bitte Produktgruppe auswählen</option>
<option value="Subsystems">Subsystems</option>
<option value="System">System Controller</option>
<option value="ScanHeads">Scan Heads</option>
</select>
</td>
</tr>
<tr>
<td><label for="Produkte">Produkte</label>:</td>
<td>
<select size="1" name="Produkte" id="Produkte" disabled="disabled">
<option selected="selected">ALADDIN</option>
<option>spectron</option>
<option>CO2 0W</option>
<option>CAIMAN</option>
<option>CROCODILE</option>
</select>
</td>
</tr>
<tr>
<td><br/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" id="Submit" value="weiter" disabled="disabled" /></td>
</tr>
</table>
</form>