Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie erstelle ich ein URL-Select-Menü?

Das Problem:

Sie möchten gerne ein Select-Menü erstellen, über das man einen Link anspringen kann.

Hier werden zwei einfache JavaScript-Lösungen vorgestellt, die nach Belieben variiert und ausgebaut werden können. Bei der ersten muß man auf den Button klicken, um zur gewünschten Adresse zu gelangen. Bei der zweiten wird der Link aufgerufen, sobald man im Menü eine Adresse ausgewählt hat.

 
Möglichkeit 1:
 <FORM>
 <SELECT NAME="URLs">
 <OPTION VALUE="http://www.netscape.com">Netscape
 <OPTION VALUE="http://www.microsoft.com">Microsoft
 </SELECT>
 <INPUT TYPE=BUTTON VALUE="Schnell weg hier!"
 onClick="top.location.href=this.form.URLs.options[this.form.URLs.selectedIndex].value">
 </FORM>

Testen:

 
Möglichkeit 2:

Dieses Script in den HEAD-Teil des Dokuments.

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 function Spring() {
    var welcherLink = document.Springen.URLs.selectedIndex;
    document.Springen.URLs.selectedIndex = "0";
    if(welcherLink > "0"){
       top.location.href = document.Springen.URLs.options[welcherLink].value;
    }
 }
 //-->
 </SCRIPT>

Effekt des Scripts: nach der Auswahl eines Links wird das Menü wieder auf den ersten Eintrag zurückgesetzt, und der ausgewählte Link wird angesprungen.

Und hier ist das dazugehörige Formular.

 <FORM NAME="Springen">
 <SELECT NAME="URLs" onChange="Spring();">
 <OPTION>-- Schnell weg hier ... --
 <OPTION VALUE="http://www.microsoft.com">Microsoft
 <OPTION VALUE="http://www.netscape.com">Netscape
 </SELECT>
 </FORM>
Testen:  

Anmerkung::
Diese Variante klappt nicht mit allen Browsern verläßlich.
Netscape-Doku dazu: "A change event occurs when a select, text, or textarea field loses focus and its value has been modified."
D.h., bei einigen Browsern reicht es nicht, das Feld auszuwählen, um sie zum "Reagieren" zu bewegen. Ein simpler Klick irgendwo außerhalb der Selekt-Box würde ausreichen. Nur muß man den Benutzer dazu erst mal bewegen.
Bekannt ist dieses Verhalten z.B. von Netscape 2 (alle Versionen?) und auch von Netscape 3 in der 16-Bit-Windows-Version.

top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Matthias Hüning (©).

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel