Select2 obtaining removed value from multiple

Question

I am using a theme which has got select2 version 3.4.3. I want to obtain the removed value ID, so I tried with:

$('#mymultiple').on("select2:removed", function (e) {

    console.log(e.val);

})

But it does not detect the event. Then, I tested:

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

    console.log(e.val);

})

But it gives me an undefined value, although the object has some info:

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

    console.log(e);

})

Object { type: "select2:unselect", params: Object, timeStamp:
1473273802173, jQuery18308796073916839738: true, isTrigger: true,
exclusive: undefined, namespace: "", namespace_re: null, result:
undefined, target: , ...}

I have to use this version because I need to use the styles given by the template project (I test 3.5.3 and

removed

works ok, but I can not import the styles correctly). So how can I get the removed value from the multiple select?

Answer 1

It seems like select2 ver 3.4.3 doesn't have support for the removed elements event.

You can use this workaround instead:

note that my code support removing of multiple elements (which I'm not sure select2 support, but you have it just in case)

$(document).ready(function() {
  $("#s1").select2();
  $("#s1").data('originalvalues', []);
  $("#s1").on('change', function(e) {
    var that = this;
    removed = []
    
    $($(this).data('originalvalues')).each(function(k, v) {
      if (!$(that).val()) {
        removed[removed.length] = v;
        return false;
      }
      if ($(that).val().indexOf(v) == -1) {
        removed[removed.length] = v;
      }
    });
    
    
    if ($(this).val()) {
      $(this).data('originalvalues', $(this).val());
    } else {
      $(this).data('originalvalues', []);
    }
    
    console.log("Removed: " + removed)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.3/select2.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.3/select2.min.js"></script>

<select id="s1" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

Select2 obtaining removed value from multiple

Sign up