CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Vipin Kr. Singh
Vipin Kr. Singh

Reputation: 672

How to get value of select2:unselect

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.

Upvotes: 18

Views: 37489

Answers (9)

Ali
Ali

Reputation: 171

@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.

Upvotes: 0

Felipe Castillo
Felipe Castillo

Reputation: 567

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

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

Upvotes: 0

Mahmaood ali
Mahmaood ali

Reputation: 127

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

Upvotes: 7

wahmal
wahmal

Reputation: 947

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

Upvotes: 0

Jcc.Sanabria
Jcc.Sanabria

Reputation: 691

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.

Upvotes: 0

Migu Wala Ngalan
Migu Wala Ngalan

Reputation: 1

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

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

Upvotes: 0

gfrobenius
gfrobenius

Reputation: 4067

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

Upvotes: 16

Chun
Chun

Reputation: 487

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

Upvotes: 15

Vipin Kr. Singh
Vipin Kr. Singh

Reputation: 672

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

Upvotes: 9

Related Questions