How to clear select2 dropdown?

Question

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.

Diggins

See https://mcmap.net/q/1323999/-listbox-items-remains-after-replace-by-empty-array-in-jquery – Testis

#13240547 – Baerl

Answer 1

Try this: $('#your_select_input').val('').trigger('change');

Rockbottom

Answer 2

Try the following code instead of val use data it will work

$("#my_select_id").select2('data', null)

Excelsior

First, thanks for you reply. I tried that too but didn't work though. – Diggins

Answer 3

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

Eucharis

Answer 4

Try this:

var newOption = new Option("", 0, false, false);
$('#your-dropdown').append(newOption).trigger('change');

Subterranean

Answer 5

try this $('#select_id').empty();

Divagate

Answer 6

In case Leo's answer here does not helps, please try the below - it worked for me:

$('#your_select_input').val([]).trigger('change');

Mush

Answer 7

2024

Just for those who are looking for it (like I needed to), but to clear the selection of a select2 component, according to the documentation at https://select2.org/programmatic-control/add-select-clear-items, just do:

$('#mySelect2').val(null).trigger('change');

Quadriceps