在同一頁面/站點上選擇2個多個版本

Question

下午，

在一個網站上，我已經將許多使用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();

    });

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都裝在同一個紙箱中，而3.5.2贏得了勝利。

但這可以通過在加載插件后引用$.fn.select2來$.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在同一頁面上都可以正常工作。