将相同元素附加到两个下拉列表会导致仅添加最后一个元素

Question

我有以下代码;

    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);
            *********************

这很有效;然而，一旦我添加以下3行（在*位置），第一个下拉列表不再附加到。

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

添加这些行后，这些行只会附加到第二个选择而不是第一个。

当然这个新元素应该附加到两个选项上，或者只能将它附加到一个，并且必须为第二个选择创建第二个元素？

Answer 1

是的，您必须创建一个新元素或克隆该元素，以便在DOM中添加两次。像：

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

Answer 2

NewOption是一个元素。附加元素后，它的移动不会被克隆。您应该创建2个选项或克隆第一个选项。现在发生的是您将选项附加到第一个选择元素并立即将其移动到第二个选择元素。