I want to hook an event in my select2 once it gets cleared. The select2 was initalized with allowClear: true
. Yet the event
$select.on('select2-removed', function(event) {
console.log(event);
});
does not trigger when resetting the select2 with the clear button.
$('.select2').select2({ allowClear: true }) it causes a clear button ("x" icon) to appear on the select box, like this: so, clicking the clear button will clear the selected value.
Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions. You may also manually trigger these events on a Select2 control using . trigger . Triggered whenever an option is selected or removed.
In order to clear the selection of those values which are selected using a Select2 drop down,we can use the empty() function. The dropdown can be reset using Jquery. $(“#select2_example”). empty();
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
select2 v4.0.3
$('#smartsearch').on('select2:unselecting', function (e) {
alert('You clicked on X');
});
For all the select2 Options & Events
For me the only thing that worked is the 'select2:unselect'
event... (In non-multiple select box)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With