Clear dropdown using jQuery Select2

Question

I'm trying to programmatically clear a drop down using the fantastic Select2 library. The drop down is dynamically filled with a remote ajax call using the Select2 query option.

HTML:

<input id="remote" type="hidden" data-placeholder="Choose Something" />

Javascript:

        var $remote = $('#remote');

        $remote.select2({
            allowClear: true,
            minimumInputLength: 2,
            query: function(options){
                $.ajax({
                    dataType: 'json',
                    url: myURL + options.term,
                    error: function(jqXHR, textStatus, errorThrown){
                        smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term);
                    },
                    success: function(data, textStatus, jqXHR){
                        var results = [];
                        for(var i = 0; i < data.length; ++i){
                            results.push({id: data[i].id, text: data[i].name});
                        }

                        options.callback({results: results, more: false});
                    }
                });
            }
        });

Unfortunately, the call to $remove.select2('val', '') throws the following exception:

 Uncaught Error: cannot call val() if initSelection() is not defined

I've tried setting the attr, setting the val, text and the Select2 specific data function. Can't seem to make the guy clear and work in a radio button like manner. Anyone got suggestions?

@EH_warch I don't want to remove the Select2 itself, merely clear the value that has been set. — wheaties, Nov 06 '12 at 16:41
i ment not to remove the whole select2, but the element. Perhaps something like `$('.itemSelected').remove()`? or you mean like doing `$remote.empty()`? — KoU_warch, Nov 06 '12 at 16:43
@EH_warch will that remove the value itself, or just the displayed element. There's two concerns here, one is making sure it appears as if we haven't selected a value and then making sure the value isn't set. I am not sure if doing what you suggest won't cause an issue with the library or fix the problem. Will it? — wheaties, Nov 06 '12 at 16:47
Asking JS questions without a fiddle is not a path to happiness. People have to do way too much grunt work to help you. — event_jr, Nov 13 '12 at 23:51

Maktouch · Accepted Answer · 2013-04-09T19:44:30.057

79

This works for me:

 $remote.select2('data', {id: null, text: null})

It also works with jQuery validate when you clear it that way.

-- edit 2013-04-09

At the time of writing this response, it was the only way. With recent patches, a proper and better way is now available.

$remote.select2('data', null)

edited Apr 09 '13 at 19:44

answered Nov 22 '12 at 20:24

Maktouch

3,117
20
21

9

While this clears the selection, I'd like to show the placeholder again. – Simon Hürlimann Jan 05 '13 at 13:45
@SimonHürlimann This would be nice. I stored the placeholder text in memory and then set the text using this solution. You might also want to add the 'select2-default' class to the 'select2-choice' element to get the proper styling. – Ben Reich Mar 22 '13 at 15:31
is not working for me. the cross button is not coming though i've selected `allowClear: true`. – soham Apr 18 '13 at 11:46
1

@soham.m17 The clear button only appears after you select a value again. @ Aktee awesome solution, tested with regular select2, multiple and ajax source multiple select and it works fine in all of these modes, even the placeholder is put back. All of this tested with Select2 3.3.2 – Fabrício Matté May 09 '13 at 20:54

Sruit A.Suk · Answer 2 · 2015-11-10T19:07:32.763

47

In case of Select2 Version 4+

it has changed syntax and you need to write like this:

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});

edited Nov 10 '15 at 19:07

answered May 10 '15 at 09:26

Sruit A.Suk

7,073
7
61
71

2

You are my hero! thank you, this fixed version 4.0 not resetting with select2('data', null); – sarah.ferguson May 20 '16 at 08:37
that's the only way to you clean your select without fire change event. – Rodolfo Jul 31 '18 at 10:18
Tried many other solution in other reply, only yours work for me on version 4.0.6-rc.0 – Niuya Dec 27 '18 at 14:00
thanks dude, you saved my life. i wasted a lot of hours for this problem. – M Hilmi Koca Nov 15 '20 at 17:38

score 32 · Answer 3 · answered Feb 16 '13 at 19:16

32

This is the proper one, select2 will clear the selected value and show the placeholder back .

$remote.select2('data', null)

answered Feb 16 '13 at 19:16

Dewey

1,193
14
18

2

Again, 4.0+ broke a lot of things! this for instance!! – sarah.ferguson May 20 '16 at 08:34

Amin · Answer 4 · 2016-01-05T06:59:01.233

28

For select2 version 4 easily use this:

$('#remote').empty();

After populating select element with ajax call, you may need this line of code in the success section to update the content:

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                }

edited Jan 05 '16 at 06:59

answered Nov 16 '15 at 07:19

Amin

579
7
23

1

This is using the jQuery [empty](https://api.jquery.com/empty/) function to remove all child objects, which may have un-intended consequences. – Aegix Dec 21 '15 at 21:50
Please explain more, which consequences? This works for me every time I use it. – Amin Dec 22 '15 at 07:51
2

It does work to an extent, but it removes all child elements from the DOM element you're selecting. Select2 relies on specific DOM elements that it builds to give you the additional functionality / behavior. So just warning that this is not a Select2 mechanism for resetting, instead you are manipulating the DOM after Select2 has initialized the element, so it may lead to loss of functionality. I found the best answer for this question @ http://stackoverflow.com/questions/17957040/reset-select2-value-and-show-placeholdler. – Aegix Dec 22 '15 at 15:53

score 18 · Answer 5 · answered Aug 20 '15 at 10:28

18

Using select2 version 4 you can use this short notation:

$('#remote').html('').select2({data: {id:null, text: null}});

This passes a json array with null id and text to the select2 on creation but first, with .html('') empties the previously stored results.

answered Aug 20 '15 at 10:28

Lelio Faieta

6,457
7
40
74

1

This is working perfectly. In select2 version 4 , $remote.select2('data', null) is not working. – ruvi Jan 31 '16 at 13:28
Works perfectly with select2 4.0.2. – Pavlos Papanikolaou Apr 15 '16 at 16:41
@AbdulHameed Do you have an empty – Lelio Faieta May 21 '16 at 11:08
@LelioFaieta no i just fetching the values from server and have a placeholder in html – Abdul Hameed May 21 '16 at 11:13
i dont' know but that worked $('#id').select2('val', 'placeholder') Thanks – Abdul Hameed May 21 '16 at 11:21

score 8 · Answer 6 · answered Aug 05 '16 at 08:08

8

You should use this one :

   $('#remote').val(null).trigger("change");

answered Aug 05 '16 at 08:08

JackWang

191
2
6

1

This is the correct solution from now on according to deprecated message thrown in debug mode: "The `select2("val")` method has been deprecated and will be removed in later Select2 versions. Use `$element.val()` instead" – Ondrej Henek Oct 08 '16 at 23:12

score 7 · Answer 7 · answered Jan 29 '19 at 15:14

7

This solved my problem in version 3.5.2.

$remote.empty().append(new Option()).trigger('change');

According to this issue you need an empty option inside select tag for the placeholder to show up.

answered Jan 29 '19 at 15:14

Michał Szymański

334
7
14

score 6 · Answer 8 · answered Jun 16 '16 at 15:33

6

Method proposed @Lelio Faieta is working for me, but because i use bootstrap theme, it remove all bootstrap settings for select2. So I used following code:

$("#remote option").remove();

answered Jun 16 '16 at 15:33

Viktor Shatilo

67
1
1

score 6 · Answer 9 · answered Aug 17 '16 at 14:31

6

I'm a little late, but this is what's working in the last version (4.0.3):

$('#select_id').val('').trigger('change');

answered Aug 17 '16 at 14:31

Andres SK

10,779
25
90
152

score 3 · Answer 10 · answered Jan 22 '16 at 00:15

3

These both work for me to clear the dropdown:

.select2('data', null)
.select2('val', null)

But important note: value doesn't get reset, .val() will return the first option even if it's not selected. I'm using Select2 3.5.3

answered Jan 22 '16 at 00:15

realplay

2,078
20
32

score 1 · Answer 11 · edited May 23 '17 at 11:54

1

I found the answer (compliments to user780178) I was looking for in this other question:

Reset select2 value and show placeholdler

$("#customers_select").select2("val", "");

edited May 23 '17 at 11:54

Community

1
1

answered Dec 21 '15 at 21:58

Aegix

629
6
14

Please let me know if I should do something different to link a different SO question.... New to this :-) – Aegix Dec 21 '15 at 21:58

score 1 · Answer 12 · answered Jun 15 '17 at 12:21

From >4.0 in order to really clean the select2 you need to do the following:

$remote.select2.val('');
$remote.select2.html('');
selectedValues = []; // if you have some variable where you store the values
$remote.select2.trigger("change");

Please note that we select the select2 based on the initial question. In your case most probably you will select the select2 in a different way.

Hope it helps.

score 1 · Answer 13 · answered Dec 28 '20 at 19:32

1

For Ajax, use $(".select2").val("").trigger("change"). That should solve the issue.

answered Dec 28 '20 at 19:32

Sam San

36
5

Welcome to SO. Though we thank you for your answer, it would be better if it provided additional value on top of the other answers. In this case, your answer does not provide additional value, since Rajdip Khavad already posted that solution. If a previous answer was helpful to you, you should vote it up once you have enough reputation. – Doj Dec 28 '20 at 19:59
Not sure about the above comment, this was great help for me and very clear. – Michael Jul 16 '21 at 21:06

score 1 · Answer 14 · answered May 24 '21 at 10:53

this code remove all results for showing new list if you need:

$('#select2Elem').data('select2').$results.children().remove()

For example, in the list of provinces and cities, when the province changes and we click on the city input, the list of old cities is still displayed until the new list is loaded.

With the code I wrote, you can delete the old list before calling ajax

score 0 · Answer 15 · answered May 19 '17 at 08:09

0

Since none of them all worked for me (select2 4.0.3) is went the std select way.

for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
    selectbox.remove(i);

answered May 19 '17 at 08:09

ManuelSchneid3r

15,850
12
65
103

score 0 · Answer 16 · edited Apr 04 '18 at 05:26

0

You can use this or refer further this https://select2.org/programmatic-control/add-select-clear-items

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

edited Apr 04 '18 at 05:26

Yasin Patel

5,624
8
31
53

answered Apr 04 '18 at 04:52

Rajdip Khavad

1
2

score 0 · Answer 17 · answered Apr 04 '18 at 11:14

0

This is how I do:

$('#my_input').select2('destroy').val('').select2();

answered Apr 04 '18 at 11:14

Sinan Eldem

5,564
3
36
37

Clear dropdown using jQuery Select2

17 Answers17

Linked

Related