How to get value of select2:unselect

Question

how can I get value of unselected option in Select2 using select2:unselect

$('#mySelect').on("select2:unselect", function(e){

    var unselected_value = $('#mySelect').val(); // using this shows 'null'
    // or using below expression also shows 'null'
    var unselected_value = $('#mySelect :selected').val();

    alert(unselected_value);
}).trigger('change');

in above code alert shows 'null'

I need to use select2:unselect because 'change' event will sense :select and :unselect both.

Warr

may help github.com/select2/select2/issues/2959 – Quicksilver

no that is not the case event is being triggered but I'm not able to fetch the value of the unselected option. @Quicksilver thanks anyway. – Warr

Answer 1

Finally, I've got the solution and that is: The value of unselected option is only available before it is unselected. Not at select2:unselect rather at select2:unselecting now the code will be:

$('#mySelect').on("select2:unselecting", function(e){
         var unselected_value = $('#mySelect').val();
         alert(unselected_value);
    }).trigger('change');

Warr

This will work for a single selection. For removing an item from multiple selections, see gfrobenius's answer above. – Ism

Answer 2

This is an older question but maybe this answer will help someone. I'm using Select2 v4.0.3 with multiple values/tags and need only the ID of specific one being removed. I really did not want to use the unselecting event as mentioned in other answers. In the unselect event there is no args object, so you can get to the ID of the one you are trying to remove like this...

jQuery('.mySelect2').on("select2:unselecting", function(e){
    return true; // I don't use this unselecting event but here is how you could use it to get the ID of the one you are trying to remove.
    console.log(e);
    console.log(e.params);
    console.log(e.params.args.data);
    console.log(e.params.args.data.id);
    //console.log(e.params.args.data.tag); data.tag is specific to my code.
});

jQuery('.mySelect2').on('select2:unselect', function (e) {
    console.log(e);
    console.log(e.params);
    console.log(e.params.data);
    console.log(e.params.data.id);
    //console.log(e.params.data.tag); data.tag is specific to my code.

    /*
    Now you can do an ajax call or whatever you want for the specific
    value/tag that you are trying to remove which is: e.params.data.id.
    */

Steepen

Thank you! Scratched my head for ages. The official docs mention data but no mention of args at all! – Ism

This is the more complete answer thus upvoting – Beekeeper

Answer 3

Actually, the data value is inside the event Object. It would be useful if you are dealing with select2 multiple values.

function(e){
    console.log(e.params.data)
}

Mutable

Specifically, e.params.data.id is the value of the selected/unselected item and e.params.data.text is the innerText label. – Liv

Specifically, when the event.type is select2:unselecting then use event.params.args.data, otherwise, you'll get an undefined. – Comp

@Comp Thank you so much! Not sure why unselecting has a different parameter structure, and it's still not documented. How did you discover args was in there? – Ism

Lol, with some debugging. Pleased to know that I could help you. – Comp

To clarify, this will only work on select2:unselect. If you are working with select2:unselecting, then you need to access e.params.args.data.id instead of e.params.data.id – Beekeeper

Answer 4

The unselected element is passing through e.params.data. We can access its value using 'id' and if you need the text you can use 'data.text'.

 $("select").on("select2:unselect", function (e) {
             var value=   e.params.data.id;
             alert(value);
    });

Inextinguishable

Answer 5

Getting the specific option value if you're using multiple tags:

var unselected_value = $('#mySelect option:selected').val();
alert(unselected_value);

Joslin

Answer 6

This is my solution to change the background color of a city in a SVG map looking for the name of the specific city. Hope this could help you

 $(".js-example-diacritics").on("select2:unselect", function(evt) {
                var element = evt.params.data.element;
                townColor(element.text, unHighLightColor);
            });

To the method townColor() I'm passing the text (city name) of the select2 element unselected and constant named unHighLightColor that holds the color name.

Comp

Answer 7

on Select2 4.0.3 i'am found e.params was changed. So, to find id from unselecting item, change your code like this :

$('select').on('select2:unselecting', function (e) {
    var id = e.params.args.data.id; //your id
    alert('Are You Sure ?');
    e.preventDefault();
  // Do something with your id
});

Victoir

Answer 8

use $(this).val(), this going to return you the last value marked in the select

$('#mySelect').on("select2:unselecting", function(e){
         alert($(this).val());
    })

Band

this shows all selected values. how can i get value of elemnt I just tried to unslect by clicking on cross – Malcolm

Answer 9

@Mahmaood ali Thank you for your solution it worked like a charm for me.

For @Vipin Kr. Singh problem.

  $('#mySelect').on("select2:unselect", function(e){
        var unselected_value = e.params.data.id;
    })
    $('#mySelect').on("select2:select", function(e){
        var selected_value = e.params.data.id;
    })

This way only you can get only one selected or unselected value at a time.

Damarisdamarra