IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Javascript: Links in einer Auswahlliste



Javascript: Links in einer Auswahlliste

Auswahllisten sind dazu da eine Reihe von Auswahlmöglichkeiten auf nur sehr wenig Platz zur Verfügung stellen zu können. Mittels Javascript ist es auch möglich die Liste mit Links zu versehen die vom Browser geöffnet werden.


Autor: Patrick Faes (dreamer)
Datum: 09-08-2007, 10:29:04
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 9043x
Rating: 10 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Die von z.B. Internetforen her bekannte Links in einer Auswahlliste sind eine sehr praktische Lösung um viele Links übersichtlich darzustellen. Dazu wird ein bisschen Javascript-Code verlangt, jedoch funktionieren diese auch ohne Javascript prächtig, wenn ein zusätzlicher Button bereitgestellt wird.

Folgendes Beispiel demonstriert dies. Es wird jeweils die Seite des betreffenden Herstellers geöffnet.



Beim Formular handelt es sich um eine so genannte Auswahlliste, die in HTML mit dem SELECT-Tag erstellt wird.

<select size="1">
	<option>Auswahl 1</option>
	<option>Auswahl 2</option>
	<option>Auswahl 3</option>
	<option>Auswahl 4</option>
	<option>Auswahl 5</option>
</select>

Eine Auswahlliste kann gefüllt werden mit mehreren Auswahlmöglichkeiten. Dafür wird der OPTION-Tag verwendet. Der Text der zwischen den Anfang- und Endtag kommt, ist der Text der angezeigt wird. Das Attribut size des SELECT-Tags bekommt den Wert 1, was bewirkt dass nur maximal eine Auswahlmöglichkeit gleichzeitig sichtbar sein kann.

Obiges Codebeispiel erstellt folgendes Formularelement:



Wenn wir das size-Attribut auf 3 einstellen, sieht unser Formular wie folgt aus:



An sich funktioniert dies auch mit dem Skript das hier gezeigt wird, jedoch würde ich es wegen seiner Größe nicht bevorzugen.

Eine Option bietet zwei Werte: einen sichtbaren Text und einen, für den User unsichtbaren Wert, welcher beim Absenden des Formulars am Server geschickt wird. Letzter wird im VALUE-Attribut der Option definiert:

<select size="1">
	<option value="wert 1">Auswahl 1</option>
	<option value="wert 2">Auswahl 2</option>
	<option value="wert 3">Auswahl 3</option>
	<option value="wert 4">Auswahl 4</option>
	<option value="wert 5">Auswahl 5</option>
</select>

Das VALUE-Attribut wird dazu verwendet um die Eingaben des Users eindeutiger zu bestimmen und vom Server auswerten zu lassen. Falls kein VALUE-Attribut aufgenommen wurde, wird in der Regel den sichtbaren Text am Server gesendet. Mit Javascript können wir beide auswerten, jedoch dazu später mehr.

Um den Aufruf einer Seite beim Ändern der Auswahl im Formular einzuleiten, verwendet Javascript einen so genannten "Event Handler", frei übersetzt etwa einen "Ereignis-Abwickler". Event-Handler werden dazu verwendet um beim Vorkommen eines Ereignisses Programme auszuführen. Dies kann z.B. das Laden einer Seite, das Drücken einer Taste oder eben das Ändern eines Formulars (bzw. dessen Inhalte) sein.

Für unserem Zweck eignet sich der "onchange-Handler". Dieser ruft ein Javascript-Code auf wenn der Inhalt eines Formular sich ändert. (Bei einer Auswahlliste also das Selektieren einer anderen Option.)

Folgendes Beispiel gibt die Nachricht "Sie haben etwas selektiert" aus wenn eine Option ausgewählt wurde.



Der dazugehörige Code sieht so aus:

<select size="1" onchange="alert('Sie haben etwas selektiert');">
	<option>Bitte wählen Sie</option>
	<option value="wert 1">Auswahl 1</option>
	<option value="wert 2">Auswahl 2</option>
	<option value="wert 3">Auswahl 3</option>
	<option value="wert 4">Auswahl 4</option>
	<option value="wert 5">Auswahl 5</option>
</select>

Im Event-Handler "onchange" wird die Javascript-Funktion alert() aufgerufen. Wir werden diesen gleich ersetzen mit einer eigenen Funktion. Zuerst aber möchte ich Ihre Aufmerksamkeit richten auf eine Besonderheit im obigen Beispiel.

Es wurde eine Option hinzugefügt mit dem Text "Bitte wählen Sie". Dies könnte auch z.B. "Kategorie:" sein. Dies dient nicht etwa dazu die Verwendung des Formulars zu erleichtern (obwohl dies dennoch genau zu diesen Zweck zu empfehlen ist), sondern weil ansonsten das onchange-Ereignis nicht verwendet werden kann um die erste Option zu wählen. Sprich: anfangs ist immer die erste Option selektiert (es sei denn der Programmierer hat dies anders bestimmt), somit tritt das onchange-Ereignis nicht ein wenn der User die erste Option anklickt.

Folgendes Beispiel demonstriert dies:



Jetzt werden wir unsere eigene Funktion erstellen, welche auf die Veränderungen im Formular reagiert. Um die Funktion aufzurufen, werden wir sie zuerst in das onchange-Ereignis aufnehmen.

<select size="1" onchange="Oeffnen(this);">

Wir nennen die Funktion Oeffnen(), da diese dazu dienen wird eine neue Seite zu öffnen (in Prinzip könnte man das Formular aber auch zu einem anderen Zweck verwenden). Als Parameter geben wir mit dem Schlüsselwort this eine Referenz auf die Auswahlliste mit. Dadurch können wir innerhalb der Funktion auf diese Liste zugreifen.

Die Definition dieser Funktion sieht so aus:

function Oeffnen(liste)
{

}

Der Parameter bekommt den Namen liste und ist ab dann darunter ansprechbar.

Das Erste dass wir jetzt tun müssen, ist nachgehen welche Option der User ausgewählt hat. Ein typischer Fehler bei Javascript-Neulinge ist, dass davon ausgegangen wird dass man die Auswahl auslesen könnte mit der Eigenschaft selected. Dem ist nicht so. Im Gegensatz zu verschiedene Varianten der Programmiersprache BASIC (wo dies der Fall ist) sagt die Eigenschaft selected nicht aus welche Option ausgewählt wurde, sondern nur ob eine bestimmte Option ausgewählt wurde oder nicht.

In Javascript gibt es dafür die Eigenschaft selectedIndex. (Schriftgröße beachten!)
Diese gibt an welche Option ausgewählt wurde anhand der Indexzahl dieser Option (wobei von null angefangen wird zu zählen). Dann können wir mithilfe dieser Indexzahl auf die ausgewählte Option zugreifen und die Inhalte auslesen.

function Oeffnen(this)
{
	var index = liste.options.selectedIndex;
	var auswahl = liste.options[index];
}

Im obigen Beispiel wird die ausgewählte Option in der Variable auswahl gespeichert. Beachten Sie dass die Eigenschaft selectedIndex gehört zu dem Unterobjekt option der Auswahlliste.

Wie schon gesagt bietet jede Option einer Auswahlliste zwei Inhalte: einen sichtbaren Text und den eigentlichen Wert. Letzterer wird im VALUE-Attribut der Option definiert.

<option value="wert" > sichtbarer Text </option>

Diese können wir auslesen mit der Eigenschaft value, bzw. text (Schriftgröße beachten!).

function Oeffnen(this)
{
	var index = liste.options.selectedIndex;
	var auswahl = liste.options[index];
	
	var text = auswahl.text;
	var value = auswahl.value;
}

Da wir jetzt diese Daten aus der Liste entnommen haben, stellt sich ja nur noch die Frage wie wir diese anwenden können. Der einfachste Weg ist wohl die Zieladressen im Formular selbst zu stellen. Dabei werden Zieladressen zu andere Seiten im VALUE-Attribut aufgenommen.

Folgendes Beispiel sahen Sie am Anfang dieses Artikels.

<select size="1" onchange="Oeffnen(this);">
	<option>Wählen Sie eine Seite aus</option>
	<option value="http://www.amazon.de">Amazon.de</option>
	<option value="http://www.it-news.cc">IT-News.cc</option>
	<option value="http://www.linux.org">Linux.org</option>
	<option value="http://www.perl.org">Perl.org</option>
</select>

Im VALUE-Attribut wird jeweils die komplette Internetadresse der Zielseite aufgenommen, während der sichtbare Teil der Option jeweils nur eine Kurzform der Zieladresse beinhaltet. So kann der User also sehr leicht erkennen zu welcher Seite er gelangen möchte, während dem Skript die komplette Zieladresse zur Verfügung steht.

Eine Variante des obigen Beispiels ist Eine, wobei die Auswahlliste verschiedene Seitenkategorien auflistet, die Internetadresse dieser Unterseiten jedoch verborgen bleibt.



Bevor wir uns ansehen wie Javascript diese Daten anwendet um eine Seite zu öffnen, zeige ich noch wie Sie überprüfen können ob die Auswahl nicht die erste Option "Gehe zu:" betrifft. Wenn Sie dies nicht machen, würde das Skript in jenem Fall fehlschlagen.

Dies zu überprüfen ist sehr einfach: wenn die erste Option ausgewählt wurde, ist die Indexziffer gleich null (weil bei null angefangen wird zu zählen). Wenn also die Indexziffer gleich null ist, brechen wir die Skriptausführung ab.

function Oeffnen(liste)
{
	var index = liste.options.selectedIndex;
	
	if (index == 0) return false;
	
	var auswahl = liste.options[index];
	var text = auswahl.text;
	var value = auswahl.value;
}

Um die Skriptausführung abzubrechen, verwenden wir die Anweisung return false. Ein Skript wird immer beendet wenn mit der Anweisung return einen Wert zurückgegeben wird. In diesem Fall geben wir false zurück. (Bedeutet etwa soviel wie ein Fehlschlag.) Ein Rückgabewert kann später weiterverwendet werden um das Ergebnis auszuwerten und weitere Aktionen einzuleiten.

Die einfachste Methode eine neue Seite zu öffnen, ist es die Zieladresse an der open()-Methode des Window-Objekts zu übergeben.

function Oeffnen(liste)
{
	var index = liste.options.selectedIndex;
	
	if (index == 0) return null;
	
	var auswahl = liste.options[index];
	var text = auswahl.text;
	var value = auswahl.value;
	
	window.open(value);
}

Die Methode open() kann noch zwei weitere Parameter haben, nl. ein Zielfenster und die Merkmale dieses Fensters. Mehr dazu lesen Sie bei SelfHTML.org.

Es ist auch möglich das Zielfenster oder -Frame zu wählen ist die Verwendung des location-Objekts. Mehr dazu finden Sie ebenfalls bei SelfHTML.org.

Anstatt die Zieladresse explizit anzugeben im Formular, ist es ebenso möglich einen Wert am Server zu senden. Dazu weisen Sie dem VALUE-Attribut einer Option einfach eine Codewort o.ä. zu der die Zielseite beschreibt.

<option value="forum">Forum</option>

Diesen müssen wir dann auslesen und hinten am Link anhängen.

function Oeffnen(liste)
{
	var index = liste.options.selectedIndex;
	
	if (index == 0) return null;
	
	var auswahl = liste.options[index];
	var text = auswahl.text;
	var value = auswahl.value;
	
	var zieladresse = 'eigeneSeite.php?auswahl=' + value;
	
	window.open(value);
}

Sie müssen dafür nur den value am Ende der Zieladresse anhängen. Der Inhalt ist dann auf dem Server verfügbar als die Variable auswahl. Es ist aber, falls Sie Leerstellen oder Sonderzeichen im VALUE-Attribut stehen haben, zu empfehlen die Funktion encodeURI() zu verwenden um diese in ASCII-Zeichen umzuwandeln. Mehr dazu finden Sie bei SelfHTML.org.

Anstatt den Wert aus dem Formularelement auszulesen und an einem Link zu hängen, können Sie auch einfach das Formular absenden.

function Oeffnen(liste)
{
	var index = liste.options.selectedIndex;
	
	if (index == 0) return null;
	
	liste.form.submit();
}

Die Eigenschaft form unserer Auswahlliste beinhaltet eine Referenz zum Formular worin unsere Liste enthalten ist. Mit der Methode submit() wird das Formular abgeschickt. Aber wie Sie schon vermutet haben, müssen wir unsere Listen dann zuerst aber mal in einem Formular einbauen.

<form action="seite.php" method="post" target="self">
	<select size="1" onchange="Oeffnen(this);">
	</select>
</form>

Der FORM-Tag kann die Attribute action, method und target haben. Diese bedeuten jeweils folgendes:
  • action: Zieladresse
  • method: GET oder POST
  • target: Zielfenster
Zum Attribut method finden Sie mehr bei WikiPedia.

Diese lassen sich mittels Javascript auch alle verändern. So kann die Zieladresse z.B. aus dem Formular entnommen werden und dem Formular übergeben werden. Das Zielfenster (oder -Frame) kann ebenso geändert werden.

function Oeffnen(liste)
{
	var index = liste.options.selectedIndex;
	
	if (index == 0) return null;
	
	var text = liste.options[index].text;
	var value = liste.options[index].value;
	
	var formular = liste.form;
	formular.action = value;
	formular.target = "_blank";
	
	formular.submit();
}

Beachten Sie dass ein Formular Ihr Seitenlayout beeinflusst. Eine Auswahlliste ist ein so genanntes Inline-Element, während ein Formular ein Block-Element ist. Der größte Unterschied liegt darin dass Inline-Elemente neben einander, Block-Elemente über einander ausgerichtet werden. Um dieses Problem zu lösen, können Sie das Formular als Inline-Element anzeigen lassen.

<form style="display: inline;">

Ein Problem stellt sich bei dieser Art der Seitennavigation aber noch: was sollen User ohne Javascript-fähigen Browser denn bloß machen? Dafür bietet es sich an einen Button neben der Liste zu stellen der das Formular einfach abschickt. Dabei sollen Sie aber beachten dass Sie serverseitig noch ein Skript parat haben dass diese Eingaben weiterverarbeitet. Sie könnten z.B. die Zieladressen im VALUE-Attribut der Optionen speichern. Mit Javascript wird man sofort weitergeleitet, ohne Javascript wird diese Zieladresse am Server gesendet der den User dann weiterleitet. Dann muss die Liste aber zwingend in einem Formular stehen das mit einem action-Attribut versehen ist. Als Button reicht dabei ein normaler Submit-Button:

<input type="submit" value="Gehe zu:">

Dies erstellt folgender Button:



Im VALUE-Attribut können Sie die Beschriftung des Buttons festlegen. Dadurch können Sie das Formular gestalten, indem Sie die Auswahlliste vor oder nach dem Button stellen und die Beschriftung anpassen. Dazu folgende Beispiele:





Wenn Sie keine Beschriftung festlegen, nimmt der Browser seine Standardbeschriftung. Dies währe in Ihrem Fall:



Jetzt müssen wir nur noch verhindern dass einen User mit einem Javascript-fähigen Browser den Button betätigt und so das Formular abschickt. An sich ja kein Problem, wir stellen den Button einfach zwischen <NOSCRIPT>-Tags und schon wird der Button nur noch angezeigt wenn kein Javascript verfügbar ist.

<noscript>
	<input type="submit">
</noscript>

Jedoch könnte es sein dass ein User den Button dennoch betätigen möchte. Sie müssen dann verhindern dass sowohl das Skript ausgeführt als das Formular abgeschickt wird. Normalerweise können Sie das Betätigen eines Buttons ignorieren lassen indem im onclick-Event des Buttons der Wert false zurückgegeben wird.

<input type="submit" onclick="return false;">

Jetzt fragt sich nur wie sich dies kombinieren lässt mit unserer Funktion Oeffnen(). Sehr einfach: die Funktion muss den Wert false zurückgeben. Dabei muss am Ende einfach die Anweisung return false eingefügt werden. Beachten Sie dass diese Anweisung auch ausgeführt wird wenn die Option ausgewählt wurde, wie weiter oben schon gesagt wurde.

function Oeffnen(liste)
{
	var index = liste.options.selectedIndex;
	
	if (index == 0) return false;
	
	var formular = liste.form;
	
	formular.submit();
	
	return false;
}

Zum Schluss möchte ich darauf hinweisen dass wenn Sie das Formular abschicken, alle Daten im Formular (falls es mehrere Element im Formular gibt) mitgeschickt werden. Zudem ist die Auswahl der Liste ebenfalls auf dem Server verfügbar unter dem Namen der Auswahlliste.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06245
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1147
Comments: 0