Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 9 Formulare
  gp 9.1 Überprüfung auf Vollständigkeit
    gp 9.1.1 Allgemeiner Aufbau
    gp 9.1.2 Texteingabefelder
    gp 9.1.3 Radiobuttons
    gp 9.1.4 Checkboxen
    gp 9.1.5 Auswahllisten
    gp 9.1.6 Fehlermeldung ausgeben
    gp 9.1.7 Konstruktive Vorschläge
  gp 9.2 Automatische Überprüfung
    gp 9.2.1 Texteingabefelder
    gp 9.2.2 Radiobuttons
    gp 9.2.3 Checkboxen
    gp 9.2.4 Auswahllisten
    gp 9.2.5 Zusammenfassung
  gp 9.3 Anwendungsmöglichkeiten für Formulare
    gp 9.3.1 Währungsrechner
    gp 9.3.2 Währungsrechner, Teil 2
    gp 9.3.3 Formularfelder für die Textausgabe nutzen
    gp 9.3.4 Navigation mit Auswahllisten
  gp 9.4 Anwendungsbeispiel: Fensteroptionen
  gp 9.5 Daten behalten
    gp 9.5.1 Das Eingabeformular
    gp 9.5.2 Die Ausgabeseite
  gp 9.6 Dynamische Auswahllisten
    gp 9.6.1 Ein erster Ansatz
    gp 9.6.2 Ein fortgeschrittener Ansatz
  gp 9.7 Überprüfungsfunktionen
    gp 9.7.1 Ganze Zahlenwerte
    gp 9.7.2 Dezimalzahlen
    gp 9.7.3 Telefonnummern
    gp 9.7.4 E-Mail-Adressen
    gp 9.7.5 In Zahlenwerte umwandeln
  gp 9.8 Reguläre Ausdrücke
    gp 9.8.1 Kurzeinführung
    gp 9.8.2 Ein Objekt erzeugen
    gp 9.8.3 Mit dem Objekt arbeiten


Galileo Computing

9.6 Dynamische Auswahllisten  downtop

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.


Galileo Computing

9.6.1 Ein erster Ansatz  downtop

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

Abbildung
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.


Galileo Computing

9.6.2 Ein fortgeschrittener Ansatz  toptop

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.

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de