jquery - 如果添加多次，动态添加的选项就会消失

Question

我刚刚发现了一个奇怪的故障。在我看来，这是一个错误。我想听听您对此的想法。

我将在这里描述这个问题:

假设我需要 3 个具有相同选项的选择，我在 HTML 中创建它们，如下所示:

  <select id="x1" class="A"></select>
  <select id="x2" class="A"></select>

  <select id="y1" class="B"></select>

然后我想使用 jQuery 用选项填充它们。我这样做是这样的:

var options = [];
for(var i=0; i<5; i++){
  options.push($("<option value='" + i + "'>" + i + "</option>"));
}

$(".A").append(options);
$(".B").append(options);

有 2 个元素的类为 A和 1 个类为 B 的元素在这个例子中。调用$(".A").append(options)后，它按照预期执行所有操作 - 它将这些选项添加到类 A 的选择中。但后来，调用 $(".B").append(options) 后，它将这些选项添加到类 B 的元素中，但具有类 A 的最后一个元素的选项消失!这看起来很奇怪!

如果我像这样添加它们，效果是一样的:

for(var i=0; i<5; i++){
  var option = $("<option value='" + i + "'>" + i + "</option>");
  $(".A").append(option);
  $(".B").append(option);
}

JSBin example

我最终使用了 $(".A, .B").append(options)将这些选项添加到所有选择中，但这似乎不对。

你有什么想法？

Answer 1

问题是因为 options 始终引用同一组 DOMElement，因此您的代码实际上是将选项添加到第一个 select，然后立即将它们传输到其他。如果你想复制元素，你需要clone()它们:

$(".A").append(options);
$(".B").append(options.clone());

您使用 $(".A, .B").append(options) 是完全合法的，在我看来，这是一个更好的解决方案。

<强> Working Demo

或者，您可以更改选项生成逻辑以创建单个字符串，然后可以将其附加到您需要的任何位置:

var options = '';
for(var i = 0; i < 5; i++){
     options += '<option value="' + i + '">' + i + '</option>';
}

$(".A").append(options);
$(".B").append(options);