Afternoon,

On a website I already updated lots of elements that used select2 v. 3.5.2 to the new v. 4.0 (and some of those elements are on the header of the website that is present on ALL pages)

Unfortunately on some pages of the website the X-editable jquery plugin is used, and that plugin doesn't play well with v 4.0 of select2 (please read: does not play at all)

My question is: Can I use both versions of select2 on some pages?

And if so, how? Since $(...).select2(); is blind to which version of select2 is loaded....

Example code:

    $("#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();

    });

Afternoon,

On a website I already updated lots of elements that used select2 v. 3.5.2 to the new v. 4.0 (and some of those elements are on the header of the website that is present on ALL pages)

Unfortunately on some pages of the website the X-editable jquery plugin is used, and that plugin doesn't play well with v 4.0 of select2 (please read: does not play at all)

My question is: Can I use both versions of select2 on some pages?

And if so, how? Since $(...).select2(); is blind to which version of select2 is loaded....

Example code:

    $("#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();

    });

• javascript
• jquery
• jquery-select2
• jquery-select2-4
• jquery-select2-3

Share Improve this question Follow asked Nov 27, 2015 at 17:35 Afonso GomesAfonso Gomes 93411 gold badge1414 silver badges4040 bronze badges 2

• Can I edit the select2-3.2.2.min.js file and make it so that I can use something like $(...).select3(...); ? – Afonso Gomes Commented Nov 27, 2015 at 17:51
• There's a modified version of x-editable designed to work with Select2 4.0.x. It's not heavily maintained (read: only occasionally), so YMMV. – Kevin Brown-Silva Commented Nov 28, 2015 at 2:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

It should be possible (but not necessarily easy) to isolate Select2 4.0.0. It is nearly impossible to isolate older versions because they rely on global variables, while Select2 4.0.0 is actually pretty self-contained (with some exceptions).

I'm guessing you are running into a situation similar to the following:

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

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

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

<link href="https://cdnjs.cloudflare./ajax/libs/select2/3.5.2/select2.css " rel="stylesheet" />
<script src="https://cdnjs.cloudflare./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>

You can see both Select2 4.0.0 and 3.5.2 are being loaded in the same bin, and 3.5.2 is winning the battle.

But this can be fixed by taking a reference to $.fn.select2 after you load the plugin. You can then either call this function directly (using .call()) or re-set the reference when you need it. I would personally remend calling the function directly, so other plugins aren't breaking because of you.

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

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

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

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

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

<link href="https://cdnjs.cloudflare./ajax/libs/select2/3.5.2/select2.css " rel="stylesheet" />
<script src="https://cdnjs.cloudflare./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>

And using the function directly has the benefit of both Select2 3.x and 4.x working on the same page without any problems.