template

Index :: Javascript :: ComboBox dynamisch füllen: per Option-Objekt

Der einfachste Weg, ComboBoxen/Listen zur Laufzeit zu ändern, z.B. deren Listenelemente an Benutzeraktionen anzupassen, besteht in der Verwendung des Option-Objekts.

Siehe auch: ComboBox dynamisch füllen: per DOM.

Bevor eine neue Option verwendet wird, muss sie erzeugt werden. Hierzu wird mindestens 1 Parameter, nämlich der Anzeigetext, übergeben. Optional können 3 weitere Parameter verwendet werden: Das Value, ein Bool'scher Wert für defaultSelected und ein Bool'scher Wert für selected.
Im Beispiel wird eine Option mit dem Text 'Tomaten' und dem Value '3' erzeugt:
var o = new Option('Tomaten', 3);
Nun kann die Option einer ComboBox zugewiesen werden, z.B.:
combo.options[3] = o;
Hier die Erstellung einer kompletten Liste:
combo.options[0] = new Option('ohne', 0);
combo.options[1] = new Option('Käse', 1);
combo.options[2] = new Option('Schinken', 2);
combo.options[3] = new Option('Tomaten', 3);
combo.options[4] = new Option('Pilze', 4);
Um einen Eintrag zu löschen, weist man ihm den Wert null zu. Nachfolgende Elemente rücken dadurch nach, d.h. es entstehen keine Lücken.
So wird aus der obigen Liste der Schinken entfernt:
combo.options[2] = null;
Alternativ können durch manuelles Heruntersetzen der combo.options.length-Eigenschaft auch Elemente am Listenende gelöscht werden.
So werden aus der obigen Liste auch noch Tomaten und Pilze entfernt:
combo.options.length = 2;
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 = [ ['Brüssel'], ['Berlin', 'Busenberg', 'Frankfurt', 'Hamburg', 'München', 'Seckenheim'], ['Bordeaux', 'Lyon', 'Paris', 'Toulouse'], ['Graz', 'Innsbruck', 'Linz', 'Salzburg', 'Wien'], ['Basel', 'Bern', 'Zürich']]; function SetTowns(cmbC) { var i, c=parseInt(cmbC.value), cmbT=document.f_sel.town; for (i=0; i<aTown[c].length; i++) cmbT.options[i] = new Option(aTown[c][i], i); cmbT.options.length = aTown[c].length; // überzählige entfernen }
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'>&Ouml;sterreich</option> <option value='4'>Schweiz</option> </select><br> Stadt <select name='town' size='1'><option value='0'>Br&uuml;ssel</option></select><br> </form>

Index :: Javascript


template