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

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 行(在 * 位置)，第一个下拉列表将不再 append 。

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

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

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

Answer 1

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