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);
})
$('#mymultiple').on("select2:unselect", function (e) {
console.log(e.val);
})
$('#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: , ...}
removed
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>