<optgroup> in <select> einfügen

[redX]

Ich habe 2 Select Felder.
Erstes enthält die Kategorien. Das zweite die Gruppen. Eine Gruppe gehört immer zu einer Kategorie. Eine Kategorie kann n Gruppen haben. Das mal zum DB design

Jetzt, wenn man im ersten Select Feld eine oderer mehrere Kategorien auswählt sollen die ensprechenden Gruppen im 2ten Select Feld angezeigt werden. Dass funktioniert auch mal soweit. Wenn man aber einige Kategorien auswählt kann das schön unübersichtlich werden. Also dachte ich mir das man das mit <optgroup> machen könnte. Dann sieht man genau welche Gruppen zu welchen Kategorien gehören.

Wie kann ich jetzt aber mit JS eine <optgroup> in ein <select> hinzufügen und dann die <option> in ein <optgroup>?

Bis jetzt sieht das JS folgendermassen aus:

/** some code */

/**
 * elt = groupen "select" element.
 * arr = elemente welche hinzugefügt werden sollen
 */
function populateMultiSelect(elt, arr){
	var j = elt.options.length;

	for (i in arr) {
		j++;
		elt.options[j] = new Option(arr[i], i);
	}
	elt.selectedIndex = 0;
}

/** some more code */

MFG
X

 

[Sven Mintel]

Eine <optgroup> kannst du bspw. per appendChild() in ein <select> einhängen.
<option>'en ebenfalls per appendChild()...dann aber auf das jeweilige <optgroup>-Element angewendet.

Da der IE das letztere irgendwie nicht will, musst du das text-Attribut der Option nach dem Einfügen in die <optgroup> setzen.