Question

我正在尝试动态清除Select2选项列表，并使用新数据重新加载它。我读到的所有内容都告诉我，我可以设置数据，就像我正在做的那样，但它只会附加数据，而不会清除数据。

for i in d1:
    if d1[i] in d2:
        print i,d1[i],d2[d1[i]]

$("#optioner").select2();

$("#doit").click(function() {
  $("#optioner").select2({
    data: [{
      id: "real1",
      text: "Real 1"
    }, {
      id: "real2",
      text: "Real 2"
    }]
  });
});

我fiddled that up对你来说。

Answer 1

在使用data选项添加选项之前，

Select2没有提供完全清除选项的方法，因为它已经可以使用jQuery .empty()函数完成。

$("#optioner").empty()
    .select2({ data: /* ... */ });

来自issue #3877：

这是data选项的预期行为。当Select2   用data初始化，它将数据对象数组转换为   可以使用的<option>元素。

因此，当您重新初始化它时，它会创建第二组<option>   元件。


如果没有，我如何重新填充Select2的选项/数据列表？


您可以通过调用.empty（）来清除现有选项   原始选择。
$("select").empty(); 
请注意，这将重置所有现有选择

＆＃13;

$("#optioner").select2();

$("#doit").click(function() {
  var $elem = $("#optioner");
  $elem.empty()
    .select2({
      data: [{
        id: "real1",
        text: "Real 1"
      }, {
        id: "real2",
        text: "Real 2"
      }]
    });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

<h1>Demo</h1>

<select id="optioner" class="select2">
  <option value="fake1">Fake 1</option>
  <option value="fake2">Fake 2</option>
</select>

<input id="doit" type="button" value="Real It Up">

＆＃13;

如何替换Select2选择框中的选项

1 个答案: