Select2 4.0如何同时使用局部json数组和无限滚动?

How to use local json array and infinite scroll together in Select2 4.0?

因为在 DOM 上 create/remove 很多 <option> 标签很昂贵,我正在寻找一种方法来使用大型本地 JSON 和无限在 Select2 4.0 中滚动。我也希望能够正确地 get/set/update 值。有(我提供了一个泥泞的解决方案)但我的解决方案有2个问题:

  1. 我可以清除单个源 select 中未select 编辑的选项,并且 Select2 控件不会中断。这可以防止在源 select 中建立不需要的选项(因为我使用本地 JSON 数组来存储数据)。但是,如果我尝试对多个 select 执行相同操作,这将破坏 Select2 中的功能。请参阅 jsFiddle 示例中的此部分:

    if(!this.$element.prop('multiple')){
        findValue = [findValue];
        this.$element.html();     // <-- if I do this for multiple then it breaks
    }
    
  2. 整个解决方案很复杂。有没有更好的方法来实现 Select2 中的大局部 JSON 和无限滚动(具有 get/set/update 值的能力,如下面的 fiddle 所示)?

这是我的完整 jsFiddle here

好的,深入研究 source 我得出结论,我正在尝试做的是反转 Select2 在其默认 select 适配器方法中所扮演的角色。我希望我的 json 数组成为权威,而不是来源 select:

  1. 还有 2 个我可以修饰的重要方法:selectunselect
  2. 由于我在初始化之外操作数组,因此我需要使用其他方式 set/update 数据。如果我直接在源 select 上设置数据,这是没有意义的,因为源 select 不知道或没有所有选项(数组包含它们,并且 returns 选项的分页结果集)。
  3. 我可以使用源 select 上的 jQuery's data 存储来设置值,然后触发更改并让 Select2 的修饰方法获取该值并检查它是否存在。如果它存在,那么我们将把它添加到源元素中。我们还可以清除源 select 上的任何其他选项,因为我们只需要 selected 选项(因此我们可以在源 select 上执行 .val() 并且表单也可以也提交值)。这应该会创建一个更清晰、更具凝聚力的代码!

jsFiddle here 有效。