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

Question

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

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

举个具体的例子，假设有下面两个select框：一个是职业，另一个是人名。预期的用例是 select 第一个中的职业，然后第二个将只列出从事该职业的人。如果我 select，例如 doctor 作为职业，然后列出第二个与所有医生我得到正确的结果。但是如果我然后重新 select 第一个，并将其更改为 engineer，然后重新打开第二个，我将在 [=22] 之前的一瞬间获得医生名单=] 管理我的工程师的负载。如果我足够快的话，我什至可以 select 作为一名医生，作为一名工程师。

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

Answer 1

Select2 "caches" 由 ajax 在原始标签的选项中检索到的选项。要像您所说的那样禁用缓存，请在新选项 selected 之前删除所有这些选项。

实际上，删除之前或之后的选项不会对您的问题产生影响，但是如果您在单个 select 中遇到同样的问题（而不是像您提到的那样合并两个），您应该使用事件 'select2:selecting' 而不是 'select2:select' 事件 (Select2 events)

执行此操作

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

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

How to disable caching of select2 search results?

jquery-select2

jquery-select2-4