jQuery Reset Select2

select2 is a jQuery based replacement for select boxes. It offers many useful features such as search, multi-select, tagging, infinite scrolling etc. However, despite its usefulness, resetting select2 dropdowns can be a bit tricky.

In this article, we will discuss how to reset select2 dropdowns by using jQuery.

Resetting Single select2 Dropdown

To reset a single select2 dropdown, we can use the following code:

$('#my-select2').val(null).trigger('change');

Here, #my-select2 is the ID of the select2 dropdown that we want to reset. The above code sets the value of the dropdown to null and triggers a change event which resets the dropdown.

Resetting Multiple select2 Dropdowns

To reset multiple select2 dropdowns, we can use a loop to iterate over all the dropdowns and reset them one by one. Here's an example:

$('.my-select2').each(function() {
  $(this).val(null).trigger('change');
});

Here, .my-select2 is the class of all select2 dropdowns that we want to reset. The each function iterates over all the dropdowns and resets them one by one.

Conclusion

Resetting select2 dropdowns can be a bit tricky, but by using val(null) and trigger('change') we can easily reset them to their default state. Whether it's a single dropdown or multiple dropdowns, we can use jQuery to accomplish this task quickly and easily.