9.6 Dynamische Auswahllisten  
In Kapitel 11 werden Sie ein Beispiel mit einer grafischen Navigation finden. Dort gibt es mehrere Kategorien, die aufgrund einer Mausbewegung ausklappen und Unterpunkte freigeben. Dies lässt sich sehr platzsparend auch in einem Formular realisieren. Es ist insbesondere möglich, via JavaScript einzelne Punkte in den Auswahllisten zu ändern, zu löschen und neue Punkte hinzuzufügen.
9.6.1 Ein erster Ansatz 
Wie Sie wissen, werden die einzelnen Optionen einer Auswahlliste im Array options gespeichert. Jede einzelne dieser Optionen hat die Eigenschaft text, die den im Browser angezeigten Text angibt.
Das ist an sich kein Problem, aber nicht alle Kategorien haben die gleiche Anzahl von Unterpunkten. Da jedoch die einzelnen Optionen in einem Array gespeichert werden, liegt es nahe, die Eigenschaft length dieses Arrays zu ändern. Einen ersten Ansatz für die Navigation finden Sie im folgenden Listing. Die linke Auswahlliste enthält die Kategorien, und wenn eine davon ausgewählt wird (Event-Handler: onchange), werden die Untermenüpunkte in der rechten Auswahlliste angezeigt. Sobald dort ein Punkt ausgewählt wird, kann die entsprechende Webseite geladen werden. Wie im Beispiel aus Kapitel 11 stehen die wichtigen Variablen – in diesem Falle die URLs und die Namen der einzelnen Menüpunkte – am Anfang des Skripts in globalen Variablen, damit sie einfach angepasst werden können.
<html>
<head>
<title>Navigation mit Auswahllisten – Teil 1</title>
<script type="text/javascript"><!--
// *** globale Variablen
var urls = new Array(
new Array(""),
new Array("", "seite1–1.html", "seite1–2.html", "seite1–3.html"),
new Array("", "seite2–1.html", "seite2–2.html"),
new Array("", "seite3–1.html", "seite3–2.html", "seite3–3.html", "seite3–4.html")
);
var beschriftung = new Array(
new Array("Bitte auswählen", ""),
new Array("Bitte auswählen", "Punkt 1.1", "Punkt 1.2", "Punkt 1.3"),
new Array("Bitte auswählen", "Punkt 2.1", "Punkt 2.2"),
new Array("Bitte auswählen", "Punkt 3.1", "Punkt 3.2", "Punkt 3.3", "Punkt 3.4")
);
// *** Ende der globalen Variablen
function kategorie_anzeigen(f) {
var kategorie = f.kategorien.selectedIndex;
f.unterpunkte.options.length = urls[kategorie].length;
for (var i=0; i<urls[kategorie].length; i++) {
f.unterpunkte.options[i].text =
(beschriftung[kategorie])[i];
}
}
function seite_laden(f){
var kategorie = f.kategorien.selectedIndex;
var unterpunkt = f.unterpunkte.selectedIndex;
}
//--></script>
</head>
<body>
<h1>Navigation mit Auswahllisten</h1>
<form>
<select name="kategorien"
onchange="kategorie_anzeigen(this.form);">
<option>Bitte auswählen</option>
<option>Kategorie 1</option>
<option>Kategorie 2</option>
<option>Kategorie 3</option>
</select>
<select name="unterpunkte"
onchange="seite_laden(this.form);">
<option>Bitte auswählen</option>
</select>
</form>
</body>
</html>
Abbildung 9.8 Die beiden Auswahllisten
Hier klicken, um das Bild zu Vergrößern
Abbildung 9.9 Das Scrollen der rechten Auswahlliste ist (in alten Browsern) schwierig.
Wenn Sie dieses Beispiel im Browser ausprobieren, werden Sie allerdings wahrscheinlich einen kleinen Nachteil beobachten: Wenn Sie das zweite Auswahlmenü ausklappen wollen, werden Sie – bei manchen Browsern und Betriebssystemen – interessante grafische Nebeneffekte feststellen (siehe Abbildung 9.9). Um diese Effekte zu vermeiden, muss das obige Skript etwas sauberer programmiert werden.
9.6.2 Ein fortgeschrittener Ansatz
Um das Beispiel ganz sauber zu programmieren, sollte man zuerst alle Optionen in der Auswahlliste löschen und dann die Optionen hinzufügen. Für Menüoptionen gibt es einen eigenen Konstruktor, new Option ("Beschriftung", "value-Attribut").
Eine einzelne Option kann gelöscht werden, indem das entsprechende Element im Array options auf null gesetzt wird. Mit folgendem Kommando wird die zweite Option in einer Auswahlliste gelöscht:
document.forms[0].auswahlliste.options[1] = null;
Sie können sich den Aufwand jedoch sparen, wenn Sie die Eigenschaft length des Arrays options auf 0 setzen. Dann können die Optionen erzeugt werden. Die Eigenschaft length wird hierbei automatisch angepasst. Es genügt, wenn Sie die Funktion kategorie_anzeigen() folgendermaßen abändern:
function kategorie_anzeigen(f) {
var kategorie = f.kategorien.selectedIndex;
f.unterpunkte.options.length = 0;
for (var i=0; i<urls[kategorie].length; i++) {
f.unterpunkte.options[i] =
new Option((beschriftung[kategorie])[i], "");
}
}
Außerdem hilft es, pro forma in die linke Auswahlliste ein paar freie leere Felder einzufügen; vor allem der Netscape Navigator führt das Skript dann zuverlässiger aus. Wie Sie sehen, umgehen Sie so grafische Unfälle.
|
