Question

首先，我已经设法在一些失败并重试后使其工作，但我不明白为什么我的一些尝试失败了。：我的目标是根据页面中的一些信息修改两个选择（2选择应该填充相同的信息）

尝试失败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。如果我交换最后两行 - ＆gt;

尝试失败1我不明白：

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

现在我的#select2已经填满了。

为了使其成功，我必须做$('#select1, #select2').append(option);

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

编辑：我的问题不在于＃，我忘了在问题中输入它们，但它们出现在我的代码中

Answer 1

您的选择者不会包含＃：

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

Answer 2

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

但是，因为它是同一个对象，所以当你将它追加到第二个下拉列表时它不会被克隆。您可以致电.cloneNode制作副本，然后附加：

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

修改两个同时选择

2 个答案: