1

下午，

在一个网站上，我已经将许多使用 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();

    });
4

1 回答 1

6

隔离 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 在同一页面上工作没有任何问题。

于 2015-11-28T02:57:56.607 回答