JavaScript Tutorial von Thomas Barmetler

Double Combo

Der Inhalt des zweiten Dropdown-Feldes ändert sich abhängig von der Auswahl im ersten Dropdown-Feld.
Diesen Code an der Stelle in den HTML-Quelltext einfügen
wo die Combo-Boxen stehen sollen:

<!-- Autor des Skripts: Michael Mailer -->
<!-- Originalversion: http://www.webaid.de -->
<!-- Dieses Skript stammt vom JavaScript Einführungskurs  -->
<!-- von Thomas Barmetler: ***** www.barmetler.de ***** -->
<!-- Bitte   entfernen   Sie   diesen   Vermerk   nicht  ! -->

<form name="doublecombo">
  <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option>Starke Seiten</option>
    <option>Presse</option>
    <option>Suchmaschinen</option>
  </select>
  <select name="stage2" size="1">
    <option value="http://www.webaid.de">JavaScript-Infos</option>
    <option value="http://www.barmetler.de">Autor dieses Kurses</option>
  </select>
  <input type="button" name="test" value="Go!" onClick="go()"></p>
  <script>
  var groups=document.doublecombo.example.options.length
  var group=new Array(groups)
  for (i=0; i<groups; i++)
    group[i]=new Array()

  group[0][0]=new Option("JavaScript Infos","http://www.webaid.de")
  group[0][1]=new Option("Autor dieses Kurses","http://www.barmetler.de")

  group[1][0]=new Option("Süddeutsche Zeitung","http://www.sueddeutsche.de")
  group[1][1]=new Option("Computermagazin c't","http://www.heise.de/ct")

  group[2][0]=new Option("Hotbot","http://www.hotbot.com")
  group[2][1]=new Option("Infoseek","http://www.infoseek.com")
  group[2][2]=new Option("Excite","http://www.excite.com")
  group[2][3]=new Option("Lycos","http://www.lycos.com")

  var temp=document.doublecombo.stage2

  function redirect(x){
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=0;i<group[x].length;i++){
      temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    }
    temp.options[0].selected=true
  }

  function go(){
    location=temp.options[temp.selectedIndex].value
  }

  // beende das Versteckspiel -->
  </script>
</form>