yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Seitenwechsel via Drop Down Box



Man macht einfach eine Drop Down Box und nennt diese "N" (Sie kann auch anders genannt werden, muss aber im JavaScript Code auch geändert werden).

Code:

<form name="frm">
<select size="1" onchange="Go()" name="N">
<option selected="selected" value="index.html">Startseite</option>
<option value="login.html">Login</option>
<option value="register.html">Anmelden</option>
</select>
</form>


Ihr werdet bestimmt erkannt haben, das unter "select" die Funktion "onchange=Go()" eingebaut ist. Das ist der eigentliche Code. Bei Wechsel der Option (also dem Navigationspunkt) im Select-Feld soll diese Seite aufgerufen werden und zwar im selben Fenster. Jetzt kommt der JavaScript Code, der muss in den <head>-Bereich:

Code:

<script language="JavaScript">
function Go()
{
location.href = document.frm.N.value;
}
</script>


Hier findet ihr die Funktion Go() wieder.
location.href bedeutet, das die aktuelle Seitenadresse geändert werden soll. document.frm.N.value bezeichnet den Wert aus der Drop-Downbox (value="..." im <option>-Feld). Und zusammen:
Wenn man bei der Selectbox die Option ändert, wird man auf die Seite weitergeleitet, die mit dem Code unter "value" eingestellt wird.



Weiterführende Links:
Mein Tutorial auf web-banana.net

Geschrieben von snake.logan am 26.11.2006 (9692x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren