在同一 page/site 上选择 2 个多个版本

Question

下午，

在一个网站上，我已经将许多使用 select2 v. 3.5.2 的元素更新为新的 v. 4.0（其中一些元素位于网站的 header 上页）

不幸的是，在网站的某些页面上使用了 X-editable jquery 插件，并且该插件不能很好地与 select2 的 v 4.0 一起播放（请阅读：根本不能播放）

我的问题是： 我可以在某些页面上同时使用两个版本的 select2 吗？

如果是这样，怎么做？ 因为 $(...).select2(); 不知道加载哪个版本的 select2....

示例代码：

    $("#search_species").select2({
        minimumInputLength: 1,
        maximumSelectionSize: 1,
        ajax: {
            url: "/php/search.php",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    query: params.term
                };
            },
            processResults: function (data, params) {
                return { results: data };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; },k

        templateResult: formatarResultados,
        templateSelection: formatarSeleccao,

    }).on("select2:selecting", function(e) {
        console.log(e);

        // window.location.href = e.params.args.data.url;
        // $('.select2-drop').hide();

    });

Answer 1

应该可以（但不一定容易）隔离 Select2 4.0.0。隔离旧版本几乎是不可能的，因为它们依赖于全局变量，而 Select2 4.0.0 实际上是非常独立的（有一些例外）。

我猜你运行遇到了类似于以下的情况：

$(".select2").select2({
  ajax: {}
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css " rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

你可以看到 Select2 4.0.0 和 3.5.2 都被加载到同一个 bin 中，3.5.2 赢得了这场战斗。

但这可以通过在加载插件后引用 $.fn.select2 来解决。然后您可以直接调用此函数（使用 .call()）或在需要时重新设置引用。我 个人建议 直接调用函数，这样其他插件就不会因为你而损坏。

myOwnSelect2.call($(".select2"), {
  ajax: {}
});

$(".select3").select2();

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css " rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<script>
  var myOwnSelect2 = $.fn.select2;
  delete $.fn.select2;
</script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css " rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<select class="select3">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

并且直接使用该函数的好处是 Select2 3.x 和 4.x 在同一页面上工作没有任何问题。

在同一 page/site 上选择 2 个多个版本

select2 multiple versions on same page/site

javascript

jquery

jquery-select2

jquery-select2-4

jquery-select2-3