Auffüllen von 2 Wählen Sie Elemente in JavaScript löscht die erste

Question

Ich habe ein Array in Javascript, das mit <option> Elemente gefüllt ist. Ich Looping über dieses Array mit dem folgenden Code:

array.forEach(e => { 
    selectElement1.appendChild(e); 
    selectElement2.appendChild(e); 
}); 

Dies ist nur in den letzten selectElement innerhalb der foreach-Schleife aufgefüllt werden.

Wie kann ich beide Select-Elemente füllen?

Answer 1

Wenn ein Knoten mit einem Elternknoten an einen anderen Knoten angehängt wird, wird der Knoten zum neuen Elternknoten verschoben. Um dies zu lösen, können Sie den Knoten clone den Knoten.

var dupNode = node.cloneNode([deep]); 

Hinweis: Da der Text (ein Kind des geklonten Knoten) wollen auch geklont werden, stellen Sie den tiefen Klon Option true.

var array = [1, 2, 3]; 
 

 
array.forEach(e => { 
 
    var el = document.createElement('option'); 
 
    el.textContent = e; 
 
    
 
    var el2 = el.cloneNode(true); // cloning with the deep option 
 

 
    selectElement1.appendChild(el); 
 
    selectElement2.appendChild(el2); 
 
});

<select id="selectElement1"></select> 
 
<select id="selectElement2"></select>

Answer 2

war ich ein bisschen spät, aber hatte schon eine Antwort, hoffe, es hilft.

---

Gemäß der Dokumentation, die appendChild() Methode.

Fügt einen Knoten an das Ende der Liste der untergeordneten Elemente eines angegebenen übergeordneten Knotens an . Wenn der Knoten bereits existiert, wird er vom aktuellen übergeordneten Knoten entfernt und dann zum neuen übergeordneten Knoten hinzugefügt.

Dies bedeutet, dass ein Knoten nicht gleichzeitig in zwei Punkten des Dokuments sein kann. Wenn der Knoten also bereits einen Elternknoten hat, wird der Knoten zuerst entfernt und dann an der neuen Position angehängt. Die Node.cloneNode() kann verwendet werden, um eine Kopie des Knotens vor dem Anhängen es unter der neuen übergeordneten erstellen.

const selects = { 
 
    one: document.getElementById('select1'), 
 
    two: document.getElementById('select2') 
 
}; 
 

 
const OptionFactory = { 
 
    create(text, value) { 
 
    return new Option(text, value); 
 
    } 
 
}; 
 

 
const { 
 
    create 
 
} = OptionFactory; 
 

 
const options = [create('Option 1', 1), create('Option 2', 2)]; 
 

 
const addOption = (select, option) => { 
 
    select.add(option); 
 
}; 
 

 
options.forEach(option => { 
 
    const clonedOption = option.cloneNode(true); 
 
    addOption(selects.one, option); 
 
    addOption(selects.two, clonedOption); 
 
});

<select id="select1"></select> 
 
<select id="select2"></select>