Question

下午，

在网站上，我已经将使用select2 v.3.5.2的许多元素更新到新的v.4.0（其中一些元素位于所有页面上的网站标题上）

不幸的是，在网站的某些页面上使用了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在同一页面上工作，没有任何问题。

在同一页面/网站上选择2个多个版本

1 个答案: