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

【问题标题】：How to disable caching of select2 search results?如何禁用 select2 搜索结果的缓存？
【发布时间】：2018-02-02 13:11:59
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery-select2 jquery-select2-4

【解决方案1】：

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

实际上，在您的问题之前或之后删除选项不会对您的问题产生影响，但如果您在一次选择中遇到同样的问题（而不是像您提到的那样结合两个），您应该使用事件 ' 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();
});

【讨论】：