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.

Answer 1

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.
    */

Answer 2

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)
}

Answer 3

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');

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);
    });

Answer 5

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

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

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.

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
});

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());
    })

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.