Clear select2 without triggering change event

Question

I have a select2 input that I'm using and on 'change' I'm grabbing the values and performing an action. I'm trying to clear that select2 without triggering a change event. Is this possible?

To clear the select2 I'm using the following code:

$docInput.select2('data', null);

This clears the input as desired, but also triggers a change event which runs through my other code. There must be a way to silence the trigger. Any ideas?

Robers

You could do a test in your onchange event and make sure that the input isn't empty before you do whatever it is you're doing in that function. – Rutilant

Can you provide jsfiddle of what you currently have? – Euhemerism

@Rutilant I'm currently using your idea as a 'fix' but I'm curious if clearing a select2 without triggering a change event is actually possible. Thanks for the idea. – Robers

AFAIK .select2('data', null) does not trigger any event. – Kimi

@FabrícioMatté made a demo for Ryan where change occurs. – Euhemerism

@Euhemerism That looks weird.. According to the docs and the source, the change event would only be fired if the optional 3rd parameter is true as in .select2('data', null, true) – Kimi

It definitely fires a change on clear... – Ballistics

@MikeFielden You're right, you need to explicitly pass false github.com/ivaynberg/select2/blob/… it is worth reporting a bug. – Kimi

Answer 1

I believe all you need is:

$docInput.select2('data', null, false);

Ballistics

Yes this should do as a temporary fix, I'll open an issue/PR later today. – Kimi

Thanks everyone for your time. I appreciate the help. – Robers

Answer 2

You can use the following with Select2 4.x

$docInput.val(null).trigger('change.select2');

Avert

Is this the only way you could find? – Aesthetic

This works because it specifically triggering the change event with the namespace that Select2 is looking for (.select2), so other event handlers will not be triggered. This namespace might change in the future, but it's pretty unlikely. – Bathrobe

This is the only solution that worked without triggering the 'change' event on the original <select> elements. Thanks! – Winegar

Works like a charm! The only solution that works and is straight forward. Solves the problem if you have an on-change event applied to multiple select2 dropdowns that update via ajax. Hooray! – Tinsmith

$('.select_auto').on('select2:selecting', function(e) { When trigger change, above function should be trigger, but its not. I changed selecting to change but still not working – Autoharp

My issue was that trigger('change') was firing the click event on a parent element. trigger('change.select2') works perfectly! – Yahrzeit