Question

我有两个select2容器，它们并排工作。两者都是基于ajax的选择，其中一个的选定值决定了另一个的结果。

我的问题如下：当我选择两个选择框中的第一个，然后打开第二个选择框时，会预先填充正确的搜索结果。然而，当我更改第一个选择，然后重新打开第二个选项，然后重新打开一秒钟，而从第二个选择选项发送新数据的ajax请求时，之前显示的结果仍然可见且可选。

对于一个具体的例子，想象以下两个选择框：一个用于占用，另一个包含人名。预期的用例是，在第一个中选择一个职业，然后第二个只列出具有该职业的人。如果我选择{例如doctor作为职业，然后与所有医生列出第二个，我得到正确的结果。但是，如果我重新选择第一个，并将其更改为engineer，并重新打开第二个，我会在ajax管理负载我的工程师之前获得医生列表一瞬间。如果我足够快，我甚至可以选择医生，作为工程师。

有没有办法禁用此行为？ IE：每当我点击ajax相关的select2时，向我显示一个空列表，或者“搜索”字符串，同时向服务器发出请求，并返回一个答案？

Answer 1

在原始标记的选项中，由ajax检索的Select2“缓存”选项。要按照您的说法禁用缓存，请在选择新选项之前删除所有这些选项。

实际上，在问题之前或之后删除选项并不会对您的问题产生影响，但如果您在单个选择中遇到同样的问题（并未按照您的提法组合两个），则应该使用事件' select2：选择'，而不是'select2：select'event（Select2 events）

$('#select-occupation').select2({
  ...,
  ajax: {
      ...
  }
})
.on('select2:selecting', function(event){
  console.log('actual value: ' + $(event.target).val());
  $('#select-people').find('option').remove();
});

如何禁用select2搜索结果的缓存？

1 个答案: