Link zu www.kneller-gifs.de

Javascript: Select-/Auswahlbox zur Navigation

Frage:
Wie macht man so eine Auswahlliste, wie bei den Gif's auf deiner Homepage?

Antwort:
Innerhalb eines Formulars die Auswahlbox per <select>- und <option>-tags erzeugen.
In das <select>-tag das Event "onchange" einbauen. Mit dem "onchange" eine Javascript-Funktion verknüpfen, die die gewählte Seite lädt. Wenn nun in der select-box ein anderer Eintrag angeklickt wird (der markierte Eintrag sich also verändert hat = "onchange"), dann wird die JavaScript-Funktion ausgeführt.

Hier zwei Varianten, wie im HEAD-Bereich das JavaScript eingebaut werden kann.

1) Einsatz in Frames:
  <head>
    <script language="JavaScript">
      function sprung(ziel) {parent.frames[2].location.href=ziel;}
    </script>
  </head>
frames[2] entspricht dem 3. Frame des aktuellen Framesets
(Bsp.: Links das navigationsframe[0], oben das selectboxframe[1] und in der Mitte das anzeigeframe[2]

2) Einsatz ohne Frames:
  <head>
    <script language="JavaScript">
      function sprung(ziel) {window.location.href=ziel;}
    </script>
  </head>

Im BODY-Bereich an der gewünschten Stelle die Select-Box erzeugen:
  <body>
    <form name="xxx">
    <select name="yyy"
      onChange="sprung(document.xxx.yyy.options[document.xxx.yyy.selectedIndex].value)"
      size="1">
      <option value="seite1.html">Seite 1 anzeigen</option>
      <option value="seite2.html">Seite 2 anzeigen</option>
    </select>
    </form>
    ...
Zuerst ein Formular mit einem Namen (hier: xxx) definieren. Dann die Selectbox mit einem Namen (hier: yyy) definieren. Danach durch die <option> -tags die Selectbox mit Werten und deren Beschreibung füllen. Per "onChange" im <select> -tag wird der Wechsel in der Liste erkannt und der angeklickte Wert (hier z.B. seite1.html) an die JavaScript-Funktion übergeben. Diese stellt dann die neue Seite im Frame bzw. neuen Window dar.