javascript - 同时修改两个Select

Question

这个问题已经有答案了:

one document.createElement, append it twice, only shows once (2 个回答)

已关闭 5 年前。

首先，我在一些失败和重试后设法使其工作，但我不明白为什么我的一些尝试失败了。 :我的目标是根据页面中的某些信息修改两个选择(这两个选择应该填充相同的信息)

失败尝试 2 我不明白:

$('#select1').find('option').remove().end();
$('#select2').find('option').remove().end();

for (var i=0; i<data.length; i++){
    var option = document.createElement('option')
    option.value = data[i].value;
    option.text = data[i].text;
    $('#select2').append(option);
    $('#select1').append(option);  

这清空了我的两个选择，但只有 #select1之后就被填满了。如果我交换最后两行 -->

失败尝试 1 我不明白:

    $('#select1').append(option);
    $('#select2').append(option);

现在是我的#select2已满。

为了让它发挥作用，我必须这样做 $('#select1, #select2').append(option);

为什么两次尝试都失败了？是var option = document.createElement('option')
就像 python 生成器一样？

编辑:我的问题与 # 无关，我忘记在问题中输入它们，但它们出现在我的代码中

Answer 1

此行为背后的原因是 document.createElement 返回一个 HTML 元素，它是一个真实的对象，您可以根据需要多次将其附加到 HTML 中的任何其他元素.

但由于它是同一个对象，因此当您将其附加到第二个下拉列表时，它不会被克隆。您可以调用 .cloneNode 来复制它，然后追加它:

$('#select1').append(option);
$('#select2').append(option.cloneNode);