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.

http://stackoverflow.com/questions/13240047/clear-dropdown-using-jquery-select2 — Oscar LT, Mar 22 '17 at 12:18

score 12 · Accepted Answer · answered Mar 22 '17 at 12:13

12

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

answered Mar 22 '17 at 12:13

Leo Schoberwalter

136
1
4

score 1 · Answer 2 · answered Mar 22 '17 at 12:27

1

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

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

answered Mar 22 '17 at 12:27

AdamIJK

575
2
11
22

First, thanks for you reply. I tried that too but didn't work though. – Prasad Patel Mar 22 '17 at 12:30

score 0 · Answer 3 · answered Oct 04 '18 at 14:54

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

score 0 · Answer 4 · answered Jun 12 '19 at 19:47

0

Try this:

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

answered Jun 12 '19 at 19:47

Will Paiz

65
1
6

score 0 · Answer 5 · answered Nov 22 '21 at 12:57

0

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

answered Nov 22 '21 at 12:57

Anjani Barnwal

1,196
1
15
22

How to clear select2 dropdown?

5 Answers5