将同一个元素追加到两个下拉列表中只会导致最后一个元素被追加

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

本文关键字：追加 元素 最后一个 下拉列表 同一个 两个      更新时间：2024-05-23

我有以下代码；

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

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

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

NewOption是一个元素。当元素被附加时，它被移动而不是被克隆。您应该创建两个选项或克隆第一个选项。现在的情况是将选项附加到第一个select元素，然后立即将其移动到第二个select元素中。

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

var NewOption_copy = NewOption.cloneNode(true);
dropdown2.appendChild(NewOption_copy);
相关文章：