javascriptで2つのselect要素を設定すると、最初の要素がクリアされます

Question

私は<option>要素で埋め込まれたJavascriptの配列を持っています。 私は、次のコードでこの配列をループしています：

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

これが移入され、foreachループ内でのみ、最後のselectElementになります。

どのようにselect要素を設定できますか？

Answer 1

親を持つノードを別のノードに追加すると、そのノードが新しい親に移動します。これを解決するには、cloneノードを使用できます。

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

注：テキスト（クローン化されたノードの子）が、同様にクローン化することにしたいので、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

私は少し遅れましたが、すでに答えを持っていた、それが役に立てば幸い。

---

appendChild()の方法によると、

ノードを特定の親の子リストの末尾に追加します。 ノード。ノードがすでに存在する場合は、現在の親ノード ノードから削除され、新しい親ノードに追加されます。

これは、文書 の2点に同時にノードを置くことができないことを意味します。したがって、ノードにすでに親がある場合、ノードは最初に が削除され、新しい位置に追加されます。 Node.cloneNode() を使用して、新しいノード の下にノードを追加する前にノードのコピーを作成することができます。完全に働いた

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>