select2-selecting event not getting fired

Question

I am using Select2 in my website, and I'm trying to use the select2-selecting event, but its not firing. I am also using Backbone.js in the app, so the first thing I tried was adding the select2-selecting to my events object:

// 'change .city':'cityChanged'
'select2-selecting .city':'cityChanged'

Note that I have a change event commented out - this change event works properly. In the documentation for Select2, the select2-selecting event is put directly on the object, not like this:

$('.city').select2().on('select2-selecting', function(e){ 
     console.log('here');
});

instead, its supposed to be used like this:

$('.city').on('select2-selecting', function(e){ 
     console.log('here');
});

I have also tried adding the event both of these ways, but the event didn't fire (I did check and the element was created on the DOM before I added the events).

When I add the event in the first method with the Backbone.js, the event is listed in the event listeners in the chrome debug console - it just doesn't get fired. Does anyone have an idea what is going on?

Antipole

Answer 1

what version of select2 are you using?

I was having the same problem until I realize I was using the 3.3 version where this select2-selecting event not exists.

This has been included in the 3.4 version.

Carlettacarley

i'm using select2 3.4.3 and i have the same problem none of the events are triggered !! – Partial

Answer 2

There was a change on earlier versions also where it changes name:

• select2-close is now select2:close
• select2-open is now select2:open
• select2-opening is now select2:opening
• select2-selecting is now select2:selecting
• select2-removed is now select2:removed
• select2-removing is now select2:unselecting

Ressler

This is correct for 3.5, no idea why the documentation does not include this..... – Verine

Answer 3

On even older versions, 'select2-removed' and 'select2-removing' events listed on @santi-iglesias' answer doesn't exists. You have 'removed' instead. Also, to get the affected optioin value, use 'event.val'.

So you can do something like this:

$('.select').on('select2-selecting removed', function(evt) {
    var value = evt.val; //do something with this
});

Checked at v3.4.3.

Discommodity