template
Index :: Javascript :: ComboBox dynamisch füllen: per DOM
Manchmal soll der Inhalt von Formular-Elementen zur Laufzeit an bestimmte Benutzeraktionen angepasst werden. Bei einfachen Objekten wie Textfeldern, CheckBoxen oder RadioButtons ist dies leicht über die Eigenschaften value bzw. checked zu bewerkstelligen.
Anders sieht es bei Listen wie einer ComboBox aus; hier ist es etwas kniffliger, Anzahl oder Anzeigetext von Options-Elementen zur Laufzeit zu ändern. Eine Möglichkeit dazu ist die Manipulation der Seitenstruktur per Javascript und DOM (Document Object Model).
Siehe auch: ComboBox dynamisch füllen: per Option-Objekt.
Im nachfolgenden Beispiel gibt es zwei ComboBoxen: eine mit Ländernamen und eine mit Städtenamen. Sobald der Benutzer ein anderes Land einstellt, soll die Städteliste automatisch aktualisiert werden, so dass immer nur Städte des ausgewählten Landes angezeigt werden (siehe 
Demo).
Vom Ändern des Landes erfahren wir durch ein onChange()-Event, mithilfe dessen wir eine eigene Funktion SetTowns() aufrufen. Diese hat dann die Aufgabe, die Liste der Städte-Combo zu modifizieren.
Javascript im Header
var aTown = new Array(
Array("Brüssel"),
Array("Berlin", "Busenberg", "Frankfurt", "Hamburg", "München", "Seckenheim"),
Array("Bordeaux", "Lyon", "Paris", "Toulouse"),
Array("Graz", "Innsbruck", "Linz", "Salzburg", "Wien"),
Array("Basel", "Bern", "Zürich"));
function SetTowns(cmbC) {
var o, oOpt, cmbT = document.f_sel.town;
var e = cmbT.childNodes.length; // vorhandene
var c = parseInt(cmbC.value); // Country-Index
var n = aTown[c].length; // benötigte
var i = e - n; // Differenz
//---- passende Anzahl garantieren
if (i>0) while (i--) cmbT.removeChild(cmbT.lastChild); // überzählige entfernen
else if (i<0) while (i++) { // fehlende hinzufügen
o = document.createAttribute("value"); o.nodeValue = e++; // value-Attrib erzeugen
oOpt = document.createElement("option"); oOpt.setAttributeNode(o); // option erzeugen
oOpt.appendChild(document.createTextNode("")); cmbT.appendChild(oOpt); // Text/Option aufnehmen
}
for (i=0; i<n; i++) cmbT.childNodes[i].firstChild.data = aTown[c][i]; // Städte eintragen
}
Weiter unten, im BODY, die beiden Combos:
<form name='f_sel'>
Land <select name='cntry' size='1' onChange='SetTowns(this)'>
<option value='0' selected>Belgien</option>
<option value='1'>Deutschland</option>
<option value='2'>Frankreich</option>
<option value='3'>Österreich</option>
<option value='4'>Schweiz</option>
</select><br>
Stadt <select name='town' size='1'><option value='0'>Brüssel</option></select><br>
</form>
Auf das DOM greifen wir hier mit einer ganzen Reihe von Funktionen zu:
| Name |
Beschreibung |
| childNodes |
Array aller Kind-Objekte (auf gleicher Ebene) |
| firstChild() |
Erstes Kind-Objekt |
| lastChild() |
Letztes Kind-Objekt |
| appendChild() |
Objekt als Kind anhängen |
| removeChild() |
Kind-Objekt löschen |
| createElement() |
Neues Objekt erzeugen |
| createTextNode() |
Text-Objekt erzeugen |
| nodeValue |
Value-Eigenschaft eines Objekts |
| createAttribute() |
Attribut-Objekt erzeugen |
| setAttributeNode() |
Attribut-Objekt zuweisen |
Es ist zu beachten, dass sich der komplette <SELECT>-Block der zu manipulierenden Combo in einer einzigen HTML-Zeile befindet. Außerdem dürfen zwischen den <OPTION>-Blöcken keine Leerzeichen stehen. Jede Art von Text, selbst Whitespaces und Zeilenumbrüche, stellen aus Sicht des DOM Text-childNodes dar, die für unsere Belange äusserst störend wären.
| template |
 |