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

Afonso Gomes 发表于 Dev

阿方索·戈麦斯（Afonso Gomes）

下午，

在一个网站上，我已经将使用select2 v.3.5.2的许多元素更新为新的v。4.0（并且其中一些元素在所有页面上显示的网站标题中）

不幸的是，在网站的某些页面上使用了X可编辑的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();

    });

凯文·布朗

隔离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都装在同一个纸箱中，而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>