Java Script : Auswahlliste normal







Zurück zur Java Scripts-Hauptseite.

Auswahllisten oder auch Pulldownmenüs genannt sind platzsparende Navigationselemente.

Auswahlliste mit direktem Link:

<script language="javascript" type="text/javascript">
<!--
function Go(x)
{
if(x == "nichts")
{
document.forms[0].reset();
document.forms[0].elements[0].blur();
return;
}
else
{
top.location.href = x;
document.forms[0].reset();
document.forms[0].elements[0].blur();
}
}
//-->
</script>
<form>
<select size=1 name="Auswahl" onChange="Go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)" style="width:150px; background-color:#FFFFFF; color=#FFFF00; font-size:9pt; font-family:Arial;">
<option value="nichts">Auswahl-Menü
<option value="../applets/">Java Applets
<option value="nichts">--------------------------------------------
<option value="mailto:st@dauerstress.de">Schreib mir
</select></form>

option value="nichts">Auswahl-Menü : die URL auf die verwiesen wird steht in Anführungszeichen, steht dort das Wort nichts wird auch nicht zu einer anderen Seite gesprungen, danach folgt der im Menü angezeigte Text
select size=1 : Anzahl der Zeilen die ohne zu scrollen sichtbar sind.

Folgende Einstellungen (style) funktionieren nur im Internet Explorer
width:150px : gibt die Breite des Menüs an
background-color:#FFFFFF : ist die Farbe des Hintergrundes
color=#FFFF00 : ist die Schriftfarbe
font-size:9pt : ist die Schriftgröße
font-family:Arial : Schriftart z.B. Arial oder Times

Auswahlliste mit Bestätigungsbutton:

<script language="javascript" type="text/javascript">
<!--
function surfto(form) {
var myindex=form.dest.selectedIndex
location=form.dest.options[myindex].value;
}
//
-->
</script>
<form name="myform">
<select name="dest" SIZE=1>
<option selected value="URL1">URL1 Beschreibung
<option value="URL2">URL2 Beschreibung
<option value="URL3">URL3 Beschreibung
<option value="URL4">URL4 Beschreibung
</select>
<input type="button" value="Laden" onClick="surfto(this.form)">
</form>

Über den Parameter SIZE= kann die Anzahl der Zeilen die ohne zu scrollen sichtbar sind festgelegt werden.

Auswahlliste mit Bestätigungsgrafik und Text in der Statuszeile:

<script language="javascript" type="text/javascript">
<!---
function surftoimg(form) {
var myindex=document.myform.dest.selectedIndex
location=document.myform.dest.options[myindex].value;
}
//-->
</script>
<form name="myform">
<select name="dest" SIZE=1>
<option selected value="URL1">URL1 Beschreibung
<option value="URL2">URL2 Beschreibung
<option value="URL3">URL3 Beschreibung
<option value="URL4">URL4 Beschreibung
</select>
<A HREF="javascript: surftoimg()" onMouseOver="self.status='Hier klicken um zur ausgewählten Seite zu gelangen.';return true" onMouseOut="self.status='';return true"><IMG SRC="../animierte_gifs/grafik/edition2/30.jpg" border=0 align=absmiddle></A></form>

Über den Parameter SIZE= kann die Anzahl der Zeilen die ohne zu scrollen sichtbar sind festgelegt werden.

2 unabhängige Auswahllisten mit Bestätigungsbutton:

<script language="javascript" type="text/javascript">
<!--
function dropdown1(form) {
var myindex=form.down1.selectedIndex
location=form.down1.options[myindex].value;
}
function dropdown2(form) {
var myindex=form.down2.selectedIndex
location=form.down2.options[myindex].value;
}
//-->
</script>
<form name="drop1">
<select name="down1" SIZE=1>
<option selected value="URL1">URL1 Beschreibung
<option value="URL2">URL2 Beschreibung
<option value="URL3">URL3 Beschreibung
<option value="URL4">URL4 Beschreibung
</select>
<input type="button" value="Start" onClick="dropdown1(this.form)">
</form>
<form name="drop2" SIZE=4>
<option selected value="URL1">URL1 Beschreibung
<option value="URL2">URL2 Beschreibung
<option value="URL3">URL3 Beschreibung
<option value="URL4">URL4 Beschreibung
</select>
<input type="button" value="Start" onClick="dropdown2(this.form)">
</form>

Über den Parameter SIZE= kann die Anzahl der Zeilen die ohne zu scrollen sichtbar sind festgelegt werden, wie hier im zweiten Beispiel gezeigt.



Kontaktformular - Copyrighthinweis und Impressum
zurück zur vorherigen Seite (nur mit Java Script)