Befüllen einer Select-Box

[Franz]

Hi,

ich befülle über ein Array (kultur) 2 Selectboxen. Das erste Element des Array wird in die erste Selectbox (selEntwicklungsstadium10) geschrieben. Bei der 2.Selectbox erhalte ich dann den Fehler das das Objekt die Eigenschaft oder Methode nicht unterstüzt, obwohl es genau der gleich Code ist.

function init()
{
 for (i = 0; i < kultur.length; i++)
 {
  NeuerEintrag = new Option(kultur[i],1);
  document.getElementById("selEntwicklungsstadium10").options[i] = NeuerEintrag;
  document.getElementById("selEntwicklungsstadium20").options[i] = NeuerEintrag;

Danke

[Felix Riesterer]

Lieber Franz,

NeuerEintrag = new Option(kultur[i],1);

erstellt ein (HTML-Element-)Objekt. Nur ein Objekt. Dieses ist ein Unikat, existiert also genau einmal. Es ist fast so, als ob Du es über eine ID bekommen hast. Zugreifen kannst Du nun über die Variable "NeuerEintrag" darauf.

document.getElementById("selEntwicklungsstadium10").options[i] = NeuerEintrag;

Hier wird es "eingebunden", indem es als Kindelement von "selEntwicklungsstadium10" (welches ein <select>-Element ist) definiert wird. Sauber ist das nicht, da Du keine DOM-Methoden wie etwa appendChild() verwendest, aber es scheint in dem von Dir getesteten Browser wie gewünscht zu arbeiten...

document.getElementById("selEntwicklungsstadium20").options[i] = NeuerEintrag;

Hier nimmst Du ein und dasselbe Objekt, das Du gerade als Kindelement eines <select>-Elements definiert hast, um es einem anderen <select> als Kindelement zuzuweisen. Das muss scheitern!

Mein Vorschlag ist folgender:

function init() {  
    for (i = 0; i < kultur.length; i++) {  
        // neues <option>-Element erstellen  
        var opt1 = document.createElement("option");  
        opt.value = kultur[i]; // befüllt das "value"-Attribut  
        opt.text = kultur[i]; // befüllt den Inhalt zwischen öffnendem und schließendem <option>-Tag  
  
        // Kopie erstellen  
        var opt2 = opt1.cloneNode(true);  
        // hier könnte man opt2.value und opt2.text noch anpassen...  
  
        // Options einbauen  
        document.getElementById("selEntwicklungsstadium10").appendChild(opt1);  
        document.getElementById("selEntwicklungsstadium20").appendChild(opt2);  
    }  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[wahsaga]

hi,

Hier nimmst Du ein und dasselbe Objekt, das Du gerade als Kindelement eines <select>-Elements definiert hast, um es einem anderen <select> als Kindelement zuzuweisen. Das muss scheitern!

Bei appendChild hätte das übrigens nicht scheitern müssen - nur hätte es wohl so auch nicht den gewünschten Effekt, weil damit ein bereits im DOM eingehängte Element von seiner derzeitigen Position entfernt wird, bevor es an der neuen Position eingefügt wird.
Clonen könnte man den Node übrigens auch noch, um ihn an anderer Stelle erneut einzuhängen.

gruß,
wahsaga

[Felix Riesterer]

Lieber wahsaga,

Bei appendChild hätte das übrigens nicht scheitern müssen

wie immer lerne ich von Dir wieder Neues. Danke Dir!

• nur hätte es wohl so auch nicht den gewünschten Effekt, weil damit ein bereits im DOM eingehängte Element von seiner derzeitigen Position entfernt wird, bevor es an der neuen Position eingefügt wird.

Spätestens hier wird der in sich nicht ganz logische Ansatz des OP deutlich, den ich mit meinem Code-Beispiel hoffentlich korrigiert habe.

Liebe Grüße aus Ellwangen,

Felix Riesterer.