DropDown-Box-Navigation mit JavaScript

Wir bauen uns in diesem Artikel eine solche Navigation mit Hilfe von HTML und JavaScript.

Dabei benötigen wir HTML, um die DropDown-Box zu setzen, und JavaScript, um die Weiterleitung zum Ziel vorzunehmen.

• Formular
• Funktionalität
  • onChange
  • Weiterleitung
• Analyse

Formular

Das erste hatten wir im Formulartutorial kennengelernt. DropDown-Boxen sind Auswahlwahlboxen werden durch den select-Tag verkapselt.

<form>
  <select>
  ...
  </select>
</form>

Jedes Ziel ist eine option, deren Bezeichnung angezeigt wird und deren Wert sinnvollerweise gleich dem URL des Zieles ist. So ersparen wir uns zusätzliche Felder und ähnliches.

<form>
  <select>
    <option value="https://brauchbar.de/index.html">Bitte w&auml;hlen</option>
    <option value="https://brauchbar.de/index.html">Homepage</option>
    <option value="https://brauchbar.de/wd/index.html">Newsletter</option>
    <option value="https://brauchbar.de/wd/online/index.html">- Archiv</option>
  </select>
</form>

Der form-Tag ist so nicht vollständig, da es method und action nicht angibt.

Dies können Sie noch machen, um ein standard-gerechtes Formular zu erzeugen, für die reine Funktion benötigen wir es jedoch nicht, wie wir sehen werden.

Funktionalität

Die Funktionalität wird nun mit JavaScript erreicht.

Wir hatten in verschiedenen Scripten den Event-Handler onload eingesetzt, der feuert, wenn eine Datei geladen wurde. Hier werden wir den Event-Handler onchange verwenden, der, wie der Name vermuten lässt, feuert, wenn es zu einer Veränderung gekommen ist.

onchange

onchange gibt es für Formularkomponenten, wie Textfelder, Listen und natürlich auch Boxen.

Veränderung ist hier in der Form zu verstehen, dass der Wert vor und nach Editierung unterschiedlich ist.

Hängt man also ein onchange an ein Textfeld, so feuert er keineswegs während man darin tippt, sondern erst dann, wenn man seine Eingabe/Änderung dort abgeschlossen hat, das Feld wieder verlässt und zuguterletzt der Wert auch noch ungleich dem ursprünglichen ist.

Alle Formularkomponenten sind im Formulartutorial erläutert.

Was heißt das für uns?

Hängen wir an unsere Box ein onchange, so wird dieser erst dann feuern, wenn wir seine Änderung beendet haben, also irgendwas anklicken. Es geschieht nichts, wenn der man das auswählt, was bereits gewählt war (keine Änderung).

<form>
  <select onchange="funktion();">
  ...
  </select>
</form>

Im Endeffekt ist das also kein großes Problem.

Man füge am Anfang der Liste einfach einen Pseudoeintrag ein, wie "Bitte wählen", "wohin?", "springe zu?", usw.

Etwas, was selbst keine sinnvolle Antwort ist und ggf. den Besucher auch noch zur Wahl auffordert. Die wenigsten Besucher werden auf die Idee kommen, das anzuklicken und wenn, passiert eben nichts.

Ergänzend können Sie diese option, und vielleicht auch andere eher strukturierender Natur abschalten:

<option disabled="disabled">Bitte w&auml;hlen</option>

Diese lassen sich dann entsprechend auch nicht wählen.

Allerdings ist eine kleine Ergänzung notwendig. Browser wählen von sich aus keine abgeschaltete option aus, sondern die erste aktive. Unser "Bitte wählen" würde als nicht vom Browser ausgewählt, sondern der hier "Eintrag 1"

Selektieren wir selbst die Aufforderung, dann wird der Browser dem folgen und diese setzen, ob sie aktiv ist oder – wie hier – nicht:

<option disabled="disabled" selected="selected">Bitte w&auml;hlen</option>

Was mit einer Auswahlbox selektiert wurde, fragt man in JavaScript über die Eigenschaft selectedIndex ab.

<form style="margin-top:1rem;margin-bottom:1rem">
<select onchange="alert('Es wurde Index '+this.selectedIndex+' gew&auml;hlt');">
<option disabled="disabled" selected="selected">Bitte w&auml;hlen</option>
<option>Eintrag 1</option>
<option>Eintrag 2</option>
<option>Eintrag 3</option>
<option>Eintrag 4</option>
</select></form>

Probieren Sie das bisher Gesagte aus!

Natürlich beginnt die Zählung bei 0.

this bedeutet etwas wie "Das aktuell betrachtete Objekt". In diesem Falle wird das daraus so abgeleitet:

Da this innerhalb des onchange verwendet wird und onchange select zugewiesen ist, ist this offenbar select und mit this.selectedIndex der Index des gewählten Boxelementes gemeint.

Dies soll hier genügen, wir wollen Details zu einem anderem anderen Zeitpunkt betrachten, um den Artikel nicht zu stark aufzublähen.

Weiterleitung

Der finale Schritt ist nun die Weiterleitung zum Ziel:

Aus einem früheren Script wissen wir, dass man durch eine einfache Zuweisung der Form location.href="URL" den Browser anweist, eben diese Adresse zu laden.

Die URLs haben wir in der value-Eigenschaft der Optionen gespeichert, die für JavaScript über ein Feld options erreichbar sind. Der Ziel-URL ergibt sicht also zu:

this.options[this.selectedIndex].value

Dies ergibt sich so:

• this ist (hier) die DropDown-Box.
• this.options sind (alle) ihre Optionen,
• this.selectedIndex ist der gewählte Index.
• Folglich ist this.options[this.selectedIndex] die derzeit gewählte Option.

Über .value greift man nun noch auf die Eigenschaft value zu, die hier den URL hält.

Wir erhalten also als DropDown-Box-Navigation mit JavaScript:

<form>
  <select onchange="location.href=this.options[this.selectedIndex].value;">
    <option disabled="disabled" selected="selected">Bitte w&auml;hlen</option>
    <option value="https://brauchbar.de/index.html">Homepage</option>
    <option value="https://brauchbar.de/wd/index.html">Newsletter</option>
    <option value="https://brauchbar.de/wd/online/index.html">- Archiv</option>
  </select>
</form>

liefert

Analyse

Vorteil

Sehr effizient, die Weiterleitung geschieht sehr zügig.

Nachteil

Da mit JavaScript realisiert, funktioniert es entsprechend nur bei Besuchern, die JavaScript aktiviert haben.

Schauen Sie sich auch die Artikel mit CGI/Perl und PHP an, die diesen Nachteil nicht haben.