I am working on a requirement that I have to clear a select2 dropdown box after form submission through ajax. I have searched & tried few solutions but didn't work though.
my select2 code is:
$(document).ready(function(){
$("#my_select_id").select2({
placeholder: "Select One Option",
allowClear: true,
initSelection: function(element, callback) { }
});
})
Script to clear select2 is:
$('#my_select_id').select2("val", "");
Could anyone please tell what's wrong in this code, Thanks.
Try this: $('#your_select_input').val('').trigger('change');
Try the following code instead of val use data it will work
$("#my_select_id").select2('data', null)
Because nothing of the available options worked for me (even the official example https://select2.org/programmatic-control/add-select-clear-items#clearing-selections)
I finally managed to clear the selections as follows:
$('select.select2 option:selected').attr('selected', false).attr('data-select2-id', false);
$('select.select2').val('').trigger('change');
Hope it helps