如何在具有 2 个 jQuery 版本的页面/站点上使用 select2

Posted 2023-05-07

【中文标题】如何在具有 2 个 jQuery 版本的页面/站点上使用 select2

【英文标题】：How can select2 be use on a page/site with 2 versions of jQuery

【发布时间】：2020-02-28 18:09:19

【问题描述】：

我有一个旧的 Web 应用程序，它已经使用 select2 v3.3.1 并由 jQuery 1.8.2 提供支持。我实现了 select2 分页，但得到“错误：当附加到元素时，Select2 不允许使用选项 'ajax'。”在控制台中。我将 select2 v3.3.1 与 select2 v4.0.11 交换，数据从 php 脚本返回，但未显示在 select 元素上。

我的问题是：选择选项是否因为 jQuery 版本而未显示，如果是，我如何使用 noConflict 来解决它，或者可以使用多个版本的 select2 来纠正它。

示例代码：

                   $('.search-diagnosis').select2(
                      placeholder: 'Select an item',
                      minimumInputLength: 5,
                      ajax: 
                        url: 'path/to/php/script',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) 
                          return 
                            search: params.term, // search term
                            page: params.page || 1,
                            page_limit: 100
                          ;
                        ,
                        processResults: function (data, params) 
                          params.page = params.page || 1;
                          return 
                            results: data.results,
                            pagination: 
                              more: (params.page * 100) < data.total_count
                            
                          ;
                        ,
                        cache: true
                      
                    );

-------------------
Sample return data:
-------------------

  "results": [
    
      "id": "5039",
      "text": "MALARIA"
    ,
    
      "id": "8957",
      "text": "MALARIA AND ACUTE RTI"
    ,
    
      "id": "8952",
      "text": "MALARIA AND BRONCHITIS"
    ,
    
      "id": "9027",
      "text": "MALARIA AND DIARRHOEA"
    ,
    
      "id": "5043",
      "text": "MALARIA AND ENTERIC FEVER"
    ,
  ],
  "total_count": 5

【问题讨论】：

我已经能够按照***.com/questions/33962395/… 中的方法使 Select2 的 2 个版本工作，但是虽然旧的 Select2 元素工作正常，但 Select2 分页仍然没有显示获取的数据。

【参考方案1】：

我发现 Select2 没有加载 ajax 数据，因为它嵌入在模式中。我刚刚包括：

dropdownParent: $("#modalId"),

作为 Select2 分页选项的一部分，现在可以了。