 Pull-Down-Menü mit Go-Button
Dateiauswahl für die Anzeige innerhalb der gleichen Seite / gleicher Frame
Eine Dropdown-Auswahl spart Platz, besonders bei großen Auswahllisten! Hier sehen sie eine Möglichkeit der Auswahl, die noch durch Klicken auf den "Go-Button" bestätigt werden muss.
Falls sie ihren Seitenbesucher wieder zur zückleiten möchten, empfiehlt sich auf der angezeigten Seite einen Zurück-Button zu notieren. Wenn die angezeigte Seite zum Weiterblättern einladen soll, könnten sie natürlich das gleiche Menü auf jeder Zielseite (zur besseren Orientierung am gleichen Platz) anbieten.
(wenn Sie dieses Menü testen, gelangen Sie mit "zürück" wieder hierher)
Code im BODY (ich verwende den gleichen Code wie im Einführungsbeispiel)
Beachten sie: Anders als im Beispiel ohne GO-Button werden in diesem Beispiel für Formular und Select Namen vergeben! Die unsinnigen Einträge 'AAAAA' und 'BBBBB' sind zwar wenig aussagekräfig, werden aber in diesem Demo vom Auge leicht wiedererkannt.
<form name="AAAAA">
<select name="BBBBB" size="1">
<option selected value="linkseite.htm"> Option 01 </option>
<option value="bsp-datei01.htm"> Frühling </option>
<option value="bsp-datei01.htm"> Sommer </option>
<option value="bsp-datei01.htm"> Herbst </option>
<option value="bsp-datei01.htm"> Winte </option>
</select>
<input type="button" value="Go"
onClick="document.location=document.AAAAA.BBBBB.
options[document.AAAAA.BBBBB.selectedIndex].value">
</form>
Erklärung:
Der Browser speichert beim Einlesen der HTML-Seite die Optionen in einem Array (Register). Nach der Auswahl und einem Klick auf "GO" wird fer Wert aus dem Array des Formulars entnommen.
Auszug aus dem Quellcode:
<form name="AAAAA">
<select name="BBBBB" size="1">
<option value="bsp-datei01.htm"> Frühling </option>
<option value="bsp-datei01.htm"> Sommer </option>
...
<input type="button" value="Go" onClick=
"document.location=document.AAAAA.BBBBB.
options[document.AAAAA.BBBBB.selectedIndex].value">
Was geschieht dann nach dem Klick auf 'GO'?
Die Quelle für das anzuzeigende HTML-Dokument für diesen Ort (location) ist zu ermitteln
1) aus diesem Formular mit dem Namen 'AAAAA'
2) aus der Auswahl der Optionen mit dem Namen 'BBBBB'
3) dem übergebenen Wert (value)
4) für die gewählte Option
Für die erste Option ist das Ergebnis dann: "bsp-datei01.htm"
Der ermittelte Wert "bsp-datei01.htm" ist dann die Datenquelle für die Anzeige.
|
HOME
BEISPIEL 
ZURÜCK