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

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

添加这些行后，这些行仅附加到第二个 select 而不是第一个。

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

Answer 1

是的，您必须创建一个新元素或克隆该元素才能在 DOM 中添加两次。喜欢：

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

Answer 2

NewOption是一个元素。追加元素时，它是移动的而不是克隆的。您应该创建 2 个选项或克隆第一个选项。现在发生的事情是您将选项附加到第一个 select 元素并立即将其移动到第二个 select 元素。

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

Appending same element to two dropdowns results in only the last being appended

javascript

append

html-select