Das Anfügen des gleichen Elements an zwei Dropdown-Listen führt dazu, dass nur die letzte angehängt wird

Question

Ich habe den folgenden Code;

function SetupDropdowns() { 
     var PrevType; 

     dropdown1 = document.getElementById("ddl1"); 
     ****************** 
     for (var i = 0; i < Cars.length; i++) { 
      var myItem = Items[i]; 
      if (PrevType != myItem.grouping) { 
       var seperator = document.createElement("option"); 
       seperator.textContent = "----- " + myItem.grouping + " ------"; 
       seperator.value = ""; 
       seperator.disabled = true; 
       dropdown1.appendChild(seperator); 
       ********************** 
       PrevType = myItem.grouping; 
      } 

      var NewOption = document.createElement("option"); 
      NewOption.textContent = myItem.Name; 
      NewOption.value = myItem.SomeProperty; 
      dropdown1.appendChild(NewOption); 
      ********************* 

Das funktioniert gut; Wenn ich jedoch die folgenden 3 Zeilen (in den * Positionen) hinzufüge, wird das erste Dropdown nicht mehr angehängt.

 dropdown2 = document.getElementById("ddl2"); 
       dropdown2.appendChild(seperator); 
     dropdown2.appendChild(NewOption); 

Wenn diese Zeilen hinzugefügt werden, werden die Zeilen nur an die zweite Auswahl angehängt und nicht an die erste.

Sicherlich sollte dieses neue Element an beide Optionen angehängt werden, oder kann es nur an eins angehängt werden und ein zweites Element muss für die zweite Auswahl erstellt werden?

Answer 1

Die NewOption ist ein Element. Wenn das Element angehängt wird, wird es nicht geklont verschoben. Sie sollten entweder 2 Optionen erstellen oder die erste klonen. Was jetzt passiert, ist, dass Sie die Option an das erste select-Element anhängen und es sofort in das zweite select-Element verschieben.

Answer 2

Ja, Sie müssen ein neues Element erstellen oder das Element klonen, um es im DOM doppelt hinzuzufügen. Wie:

var NewOption_copy = NewOption.cloneNode(true); 
dropdown2.appendChild(NewOption_copy);