Can't change select2 options/properties dynamically.

[alihammoud90]

Hello,

I was trying to change the maximumSelectionLength option dynamically in multiple select2 v4.0.0 & v4.0.4 but nothing was changed.

In my code, if the user chooses 'ALL' value I need to set maximumSelectionLength to 1, in order not to allow user to choose other option than 'ALL', but if the user chooses some other value, I need to keep maximumSelectionLength = 0 (Infinity).

I tried this code:

// select2 initilaization
$('#selector').select2({some options and ajax call})
}).change(function(e) {
    $(this).data('select2').options.options.maximumSelectionLength = 1;
    console.log($(this).data('select2').options.options);
});

In console.log I can see the options is changed, but it is not applied to the select2 options.

Knowing that in select2 v3.5.0 I used to this and it was working fine.
I used to write this code:

$(this).data('select2').opts.maximumSelectionSize = 1;

Please look into this issue.
Thank you.

[alexweissman]

Hi, please try to use Markdown to format your example code. This makes it easier for others to read and understand. I have fixed it for you this time, but you should learn how to use Markdown to improve the way you communicate with other developers in the future.

[alexweissman]

It's unclear whether allowing the configuration options to be modified after initialization is a good idea. For some config options, this could lead to unexpected behavior.

A better solution might be to simply have a separate "all" toggle button, that disables/enables the select control when toggled. This would also have the advantage of not needing to clear the current selections if someone later selects the "all" option.

[alihammoud90]

Hello, thanks for your note regarding Markdown.

The reason I opened the issue is that it was supported in v3.5.0, so I thought it doesn't have disadvantages, but your solution seems to be good.
I also tried the following as a workaround:

// select2 initilaization
$('#selector').select2({some options and ajax call})
}).change(function(e) {
    var selected = $(this).val();
    if(selected && selected.length) {
        if (selected.indexOf('ALL') >= 0) {
            $(this).empty().append(new Option('ALL', 0, true, true));
        }
    }
});

The above code will force removal of all elements when selecting 'ALL' option, and prevent selecting any other selections if 'ALL' is selected.

Thanks.

[alexweissman]

Yes, it would seem that a lot of features were removed in v4 in an attempt to make the core library more compatible with a standard <select> control, and to delegate additional features to the adapter system.

Unfortunately the lead developer stepped away without making this completely clear, and as a result there is a lot of confusion over the future direction of Select2.

[karolyi]

+1

my case is somewhat similar. I want to add a class to the select2 dropdown on some instances so I can use CSS styling on it.

where did the .data('select2') disappear?

[karolyi]

Okay, I figured it out after having consulted the source code. Leaving it here for future googlers :)

Here's how you do it (I'm using ES6):

const select2Utils = $.fn.select2.amd.require('select2/utils')
const select2Instance = select2Utils.GetData(
  this.jqSelectClientId[0], // Your jquery instance to the select
  'select2',
)
select2Instance.$dropdown.addClass('step4-client')

Getting the instance through the data('select2') is no more a viable option, only used as a fallback for older browsers, I guess.

[oh-ren]

Thanks, though .data('select2') is working here

-edit: though I'm still on 4.0.5. It seems you're referring to #4346 which shipped with 4.0.6-rc.0

Anyway, there should be a better way to retrieve the Select2 object associated with the select node? I'm in the same boat as you: wanting to add a class on the $container element (custom validation).
That workaround looks rather horrendous however..

+ This seems to be a rather big change for just a patch increment..(?)
Seems this is API breaking, so should be a major update. OTOH: I haven't seen the use of .data('select2') officially been documented (perhaps in some earlier version of the docs though?)

[alexweissman]

I'm fairly new to the Select2 internals, but it would appear that data('select2') was never meant to be part of the public API. See #4346 (comment). We will add BC-support for this, but it will be deprecated and eventually removed.

[oh-ren]

Thanks, discussing further @ #4346

[alexweissman]

Alright, we'll resolve this for the time being in 4.0.6-rc.1 by adding BC compatibility, but going forward it would be good to deprecate this being a part of the public API, and provide some more structured alternative instead.