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始终引用同一组DOMElements，因此您的代码实际上是将选项添加到第一个select，然后立即将它们转移到另一个。clone()。如果要复制元素，则需要$(".A").append(options); $(".B").append(options.clone());它们：

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

您使用option是完全合法的，在我看来，这是一个更好的解决方案。

<强> Working Demo

或者，您可以更改var options = ''; for(var i = 0; i < 5; i++){ options += '<option value="' + i + '">' + i + '</option>'; } $(".A").append(options); $(".B").append(options);生成逻辑以创建单个字符串，然后可以将其附加到您需要的任何位置：

var mainapp = angular.module('mainApp', []);
mainapp.controller('control', function ($scope) {

    $scope.posts = [
        {title: 'post 1', upvotes: 5},
        {title: 'post 2', upvotes: 2},
        {title: 'post 3', upvotes: 15},
        {title: 'post 4', upvotes: 9},
        {title: 'post 5', upvotes: 4}
    ];
   
});

如果多次添加，动态添加的选项将消失

1 个答案: