Inhalt von DIV erweitern

[andik2000]

Hallo, heute hätte ich gerne mal ein JS-Problem.

Ich habe ein HTML-Formular, auf dem man vordefinierte Artikel in einer Selectbox auswählen kann. Defaultmäßig hat man 5 Selectboxen. Wenn die nicht reichen, soll man über ein "+" weitere Boxen erstellen können.

Ich habe die Selectboxen in einem DIV-Container. Wenn ich auf das Plus klicke lese ich per innerHTML den Inhalt aus, hänge einen weitere Box an und schreibe den Code per innerHTML zurück.
Das funktioniert soweit bis auf die Tatsache, dass sich der Browser nicht merkt, welcher Wert in der neuen Selectbox ausgewählt war, wenn ich eine neue Anlege.
Ich müsste also nach jeder neu erzeugten Box auswählen und speichen. Oder erst zwei-drei neue Boxen erzeugen und dann die Auswählen.

Nun die Frage, ob es nicht einen Befehl gibt, der einfach weiteren HTML-Code an einen Container hinten dran hängt, ohne dass man den Inhalt vorher auslesen muss?

[Kropff]

Damit ich das richtig verstehe. Du dupliziert einfach ein Select-Element?

Peter

[andik2000]

Ja, sozusagen. Ich lasse den ID-Namen aber schon erhöhen, so dass es keine doppelt-Benamten Elemente gibt.

Es gibt z.B. 30 Produkte in der Selectbox. Daraus kann man auswählen, welche man besitzt. Im Durchschnitt genügen 5 Boxen aber in Einzelfällen können es mehr sein. Es wird dann quasi immer eine neue Selectbox mit den ganzen Produkten hinzugefügt.

[Kropff]

Noch mal zum Verständnis. Du hast z.B. 5 Select-Elemente mit unterschiedlichen(?) Produkten. Und dann duplizierst du meinetwegen die erste mit ihren 30 Produkten.

Peter

[andik2000]

Ja. Aber vergiss das mal mit den Boxen.
Ich habe einen Div-Container mit Inhalten drin. Nun möchte ich einfach weiteren Inhalt am Ende hinzufügen, ohne dass ich den bestehenden Inhalt erst auslesen muss.

Versuche gerade mit appendData() aber das geht nicht. Muss man wohl einen childNode angeben etc. - da blicke ich noch nicht ganz durch.

[Kropff]

Jetzt weiß ich, was du meinst.

document.getElementById('bla').innerHTML += neues_html; 

Alternativ kannst du auch übers DOM machen. Ein Tutorial dazu findet du bei mir nebst ein paar Praxisübungen.

Peter

[andik2000]

Danke, aber nein - genau so habe ich es ja und dabei setz es immer die bereits geänderten Selectboxen zurück.

Ich stelle mir halt so was in der Richtung vor:

neues_html = '<select>...</select>';
document.getElementById('bla').addContent(neues_html); 

Es soll halt einfach an das Ende des vorhandnen Inhalts im DIV neuer Inhalt hinzugefügt werden, ohne den bestehenden Inhalt zu überschreiben.

Bin schon die ganzen Node-Funktionen durch. Es scheint wirklich keinen "einfachen" Weg zu geben.
Einfach wäre halt der Weg per innerHTML, wenn der nicht die Selectboxen zurücksetzen würde :-(

[AmicaNoctis]

Hallo,

ich würde sogar dringend empfehlen, das über's DOM zu machen. Der IE ist dafür bekannt, dass er mit select-Elementen und innerHTML Probleme hat. Außerdem ist es viel sauberer (find ich).

Gruß,

Amica

[andik2000]

So, ich habe mir jetzt anders geholfen.
Es geht ja nur um die ausgewählten Felder der Selectboxen.

Also mache ich nun folgendes, wenn jemand eine weitere Box hinzufügt:

- SelectedIndex aller bisherigen Boxen auslesen und in ein Array speichern.
- Neue Box hinzufügen, per document.getElementById('bla').innerHTML += neues_html;
- Gespeicherte Indexe der vorherigen Boxen zurück schreiben.

Und was soll ich sagen - es funktionieeerttt!!! :-)
Werde es jetzt noch mal durch alle Browser testen... sehr wahrscheinlich heule ich später wieder ;-)

[Kropff]

Werde es jetzt noch mal durch alle Browser testen... sehr wahrscheinlich heule ich später wieder ;-)

Wenn es im IE klappt, sollten die anderen Browser dein geringstes Problem sein.

Peter

[andik2000]

So, getestet. Läuft überraschenderweise überall. Hurra.