Reset select2 value and show placeholder

Question

How do I set the placeholder on value reset by select2. In my example If locations or grade select boxes are clicked and my select2 has a value than the value of select2 should reset and show the default placeholder. This script is resetting the value but won't show the placeholder

$("#locations, #grade ").change(function() {
   $('#e6').select2('data', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});

Just refer to the Documentation instead of using weird suggestions which wont work from this or other SO threads. The suggested approach by Select2 is: `$('#mySelect2').val(null).trigger('change');`. Reference: https://select2.org/programmatic-control/add-select-clear-items. And that works like a charm. — , Aug 25 '21 at 07:46
incase if any one needs full implementation with ajax https://codepen.io/ashgadala/pen/NWOxBze — Avi, Apr 13 '23 at 23:06

score 260 · Accepted Answer · edited Jan 24 '17 at 15:20

260

You must define the select2 as

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

To reset the select2

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

edited Jan 24 '17 at 15:20

Hakan Fıstık

16,800
14
110
131

answered Oct 22 '13 at 14:11

AbdelMalek

2,836
2
19
12

7

I tried this with a element. – Sorin Postelnicu Dec 12 '14 at 11:36
19

This does not work for me. The placeholder still does not show up. – bcr May 04 '15 at 19:41
2

$("#customers_select").select2("val", ""); working for me :D – Spl2nky Jul 30 '15 at 10:47
5

See @Lego Stormtroopr's answer below, which reflects the new method according to Select2's API. The above method is deprecated. – David Mar 04 '16 at 02:22
16

As of v4.0.3, it doesn't seem like `.select2("val", "")` works anymore. – adamj Aug 06 '16 at 13:45
3

$("#selectId").empty().select2(); – Danilo Pádua Sep 19 '16 at 14:38
1

@Danilo it clears all the values from the drop down if you try to search / select another value , – Muhammad Omer Aslam May 27 '17 at 20:28
$("#customers_select").select2({ data: " ", placeholder: "Select a customer" }); – Fai Zal Dong Jul 04 '17 at 10:09
$("#customers_select").select2("data", null); – Adrian P. Dec 12 '17 at 16:15
59

`$("#customers_select").val('').trigger('change') ;` I used this and it worked. – Akshay Kulkarni Feb 23 '18 at 12:28
$("#selectId").empty().select2() works for me also - but I still can't reset to placeholder text – SolaceBeforeDawn Jul 20 '18 at 00:18
@adamj how can I do it without triggering it. – Varun Chawla Aug 20 '19 at 07:42

NorthCat · Answer 2 · 2016-03-03T14:06:20.267

203

The accepted answer does not work in my case. I'm trying this, and it's working:

Define select2:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

or

$("#customers_select").select2({
    placeholder: "Select a State"
});

To reset:

$("#customers_select").val('').trigger('change')

or

$("#customers_select").empty().trigger('change')

edited Mar 03 '16 at 14:06

answered Mar 03 '16 at 13:33

NorthCat

9,643
16
47
50

2

I found that unless you have the placeholder defined the allowClear does not work – Dan Tappin Jul 26 '16 at 20:23
Neither `$('#your_select_input').val('').trigger('change')` nor `$('#your_select_input').val('');` doesn't work in Firefox – Alex Art. Oct 11 '16 at 18:36
2

this works for me, it deletes all data from the select2 I'm using v4.0.3 – ClearBoth Jan 26 '17 at 07:15
13

$("#customers_select").empty().trigger('change') works for me. :) – Munna Khan Mar 07 '17 at 19:57
@NorthCat Thanks. I was explicitly appending the values into my select2, so ".val('')" was not working. Then I saw "empty" in your answer and I realized that I need to use "empty" and it worked. Thanks again. – Vibhav Chaddha Oct 06 '17 at 05:20
For some reason . . . only the empty().trigger('change') worked . . . – Andrew May 25 '18 at 15:29
2

'$("#customers_select").empty().trigger('change')' worked for me, thanks! – Tahirhan Dec 12 '19 at 08:29
this one works pretty well `$("#customers_select").empty().trigger('change')` – STA May 30 '20 at 12:28
`$("#customers_select").val('').trigger('change')` worked for me. :) Thanks! – Sushant Pimple Jun 14 '20 at 10:27
I tried with `.val(null)` and didn't work, but `.empty()` works great! :D – Rorrim Jan 13 '23 at 17:13
```allowClear: true``` worked as expected. – Badri Paudel May 16 '23 at 11:11

score 134 · Answer 3 · edited Jan 24 '17 at 15:17

134

Select2 has changed their API:

Select2: The select2("val") method has been deprecated and will be removed in later Select2 versions. Use $element.val() instead.

The best way to do this now is:

$('#your_select_input').val('');

Edit: December 2016 Comments suggest that the below is the updated way to do this:

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

edited Jan 24 '17 at 15:17

Hakan Fıstık

16,800
14
110
131

answered Feb 02 '15 at 04:57

145

This updates the value, but for it to show up correctly, you'll have to trigger a change event. `$('#your_select_input').val('').trigger('change')` – Saneem Mar 24 '15 at 07:36
5

This does not work for me. The placeholder still does not show up. – bcr May 04 '15 at 19:41
4

This works for me with the `change` trigger addition, but also triggers the validation library we're using--for now I'll have to use the deprecated version. – Dave Newton Jun 02 '15 at 21:12
6

This does not work correctly, using select2 4.0.2. It will reset the selection and restore the placeholder, but when I choose a new value (post reset), I also see selected an "empty string" option (i.e., a box with only an "x" in it). – kounoupis Mar 04 '16 at 16:14
@kounoupis i am facing same issue. did you find the fix for this? – A_m0 Jun 13 '16 at 13:52
1

$('#your_select_input').val('').trigger('change') works only when placeholder is provided. else empty string option will be displayed as selected option. – A_m0 Jun 14 '16 at 09:44
Neither `$('#your_select_input').val('').trigger('change')` nor `$('#your_select_input').val('');` doesn't work in Firefox – Alex Art. Oct 11 '16 at 18:35
Shouldn't this be `val([])`? – TrueWill Dec 19 '16 at 19:16
@TrueWill maybe - I haven't had a chance to test it. If `val([])` works, feel free to update the answer. – Dec 19 '16 at 21:30
The $().val([]) worked for me when nothing else would. This seems to be the current answer. – jessier3 Dec 27 '16 at 17:33
The correct way (see the code for the "clear" button: https://select2.github.io/examples.html#programmatic) is to set the value to null and trigger the change event: `$('#your_select_input').val(null).trigger('change');` If you don't want bound `change` listeners to run (i.e. silently change the value) then trigger `change.select2` instead (https://github.com/select2/select2/issues/3620) – Paul Mar 23 '17 at 17:31
as @amol said,we need to trigger change,if not,the selected options are cleared,but there are seleted in the select input. – wangsir Nov 25 '19 at 07:09
`$('#your_select_input').val([]).trigger('change');` did the job for me – Mohit Dodhia Dec 07 '20 at 07:41
Late to the party, but for this to work, you need an empty ` – pythonator Apr 11 '23 at 13:27

score 67 · Answer 4 · edited Aug 08 '18 at 00:12

67

The only thing can work for me is:

$('select2element').val(null).trigger("change")

I'm using version 4.0.3

Reference

According to Select2 Documentation

edited Aug 08 '18 at 00:12

SnareChops

13,175
9
69
91

answered Feb 27 '17 at 07:31

M.Tae

1,437
1
14
24

2

I'm also using v4.0.3 and `$('select2element').val("").trigger("change")` is working fine too. – Roubi May 24 '17 at 18:38
Please note that you must also have an empty – musicjerm Feb 17 '20 at 21:20

IlludiumPu36 · Answer 5 · 2020-09-14T01:53:45.923

45

With Select2 version 4.0.9 this works for me:

$( "#myselect2" ).val('').trigger('change');

edited Sep 14 '20 at 01:53

answered Aug 27 '19 at 01:54

IlludiumPu36

4,196
10
61
100

1

This made my select2 dropdown blank. Worked for me. Thanks. – disha Apr 03 '20 at 11:33
Worked for me for version 4.0.13 – Shashank Shah Feb 16 '22 at 14:28

score 19 · Answer 6 · answered Nov 01 '14 at 15:42

19

Select2 uses a specific CSS class, so an easy way to reset it is:

$('.select2-container').select2('val', '');

And you have the advantage of if you have multiple Select2 at the same form, all them will be reseted with this single command.

answered Nov 01 '14 at 15:42

Marcio Mazzucato

8,841
9
64
79

score 17 · Answer 7 · answered Mar 02 '17 at 02:42

17

I know this is kind of an old question, but this works for the select2 version 4.0

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

or

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

if you have change events bound to it

answered Mar 02 '17 at 02:42

Sean

191
1
5

1

Excellent solution. I had to add .last() function to target the newly added select2 box. `$('#select2-element').last().val('').trigger('change.select2'); ` – InsParbo Nov 23 '17 at 00:22

score 17 · Answer 8 · edited Sep 29 '17 at 08:06

17

Use this :

$('.select').val([]).trigger('change');

edited Sep 29 '17 at 08:06

GGO

2,678
4
20
42

answered Sep 29 '17 at 07:20

Sachin Gend

171
1
3

For me, worked with $('.select2').val([]).trigger('change'); – Marcelo Agimóvel Jan 10 '18 at 12:22
I've tried all the suggestions above but none worked for me. This is worked perfectly for me. thanks! – user752746 Jul 28 '22 at 21:36

score 15 · Answer 9 · answered Jul 23 '15 at 07:52

15

TO REMOVE SELECTED VALUE

$('#employee_id').select2('val','');

TO CLEAR OPTION VALUES

$('#employee_id').html('');

answered Jul 23 '15 at 07:52

Shanka SMS

644
6
15

1

fefe is asking for re-setting the placeholder text. So only the first part of this answer is valid. – Saranga A Aug 06 '15 at 11:38
2

Yes that's why i highlight the answers title. – Shanka SMS Oct 14 '15 at 07:31
2

The first answer indeed it isn't applying anymore from >4.0. But the second option saved me! This is the solution when you want to really clear the select2. Just setting the .val('') to select 2 it isn't enough. You need also to clear the html. Thanks a lot!!! – wazza Jun 15 '17 at 12:12
any way thanks @ShankaSMS I was looking for solution to reset and rebind the data to select2 – Aung Aung Dec 06 '20 at 15:52

TreeZ · Answer 10 · 2018-05-15T10:55:34.430

9

This is the correct way:

 $("#customers_select").val('').trigger('change');

I am using the latest release of Select2.

edited May 15 '18 at 10:55

answered Mar 28 '18 at 10:26

TreeZ

137
1
7

score 8 · Answer 11 · answered Apr 12 '17 at 10:47

8

I tried the above solutions but it didn't work for me.

This is kind of hack, where you do not have to trigger change.

$("select").select2('destroy').val("").select2();

or

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});

answered Apr 12 '17 at 10:47

tech_boy

195
3
13

I modified to something like in my implementation: $("#select").on('change', function () { $(this).val("").select2(); }); – Carlos Espinoza Apr 15 '21 at 20:36

score 8 · Answer 12 · answered Aug 02 '17 at 12:05

Use following to configure select2

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

And to clear select input programmatically

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

score 6 · Answer 13 · edited Dec 04 '17 at 14:52

6

You can clear te selection by

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

But it wont turn you back to your placeholder.

So its a half solution

edited Dec 04 '17 at 14:52

Shahzad Barkati

2,532
6
25
33

answered Jan 26 '17 at 20:23

Rodrigo Butta

379
4
8

score 6 · Answer 14 · answered Jul 23 '17 at 22:08

Firstly you must define select2 like this:

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

To reset select2, simply you may use the following code block:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

score 5 · Answer 15 · answered Jul 31 '17 at 23:11

5

For users loading remote data, this will reset the select2 to the placeholder without firing off ajax. Works with v4.0.3:

$("#lstProducts").val("").trigger("change.select2");

answered Jul 31 '17 at 23:11

2Yootz

3,971
1
36
31

Worked for me but my trigger was just 'change' – Gregory R. Sudderth Aug 03 '17 at 18:38
This was the only solution that worked for me to reset a Select2 from another Select2 using Ajax data. – IlludiumPu36 Aug 27 '19 at 02:41

score 5 · Answer 16 · answered Aug 27 '19 at 13:26

So, to reset the form some of you will have a reset button. Add the following code inside the script tag

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

Or just to empty select field without keeping a placeholder:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });

score 3 · Answer 17 · answered May 09 '18 at 06:22

3

For the place holder

$("#stateID").select2({
    placeholder: "Select a State"
});

To reset a select 2

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

Hope this helps

answered May 09 '18 at 06:22

Duke

35,420
13
53
70

fmsf · Answer 18 · 2016-03-30T12:22:12.857

Following the recommended way of doing it. Found in the documentation https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (this seems to be a fairly common issue):

When this happens it usually means that you do not have a blank <option></option> as the first option in your <select>.

as in:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

Aba · Answer 19 · 2017-03-23T21:03:38.700

I was also having this problem and it stems from val(null).trigger("change"); throwing a No select2/compat/inputData error before the placeholder gets reset. I solved it by catching the error and setting the placeholder directly (along with a width). Note: If you have more than one you will need to catch each one.

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

I'm running Select2 4.0.3

It sounds like you have a listener bound to the `change` event. Try triggering `change.select2` - that won't trigger bound listeners (see https://github.com/select2/select2/issues/3620). — Paul, Mar 23 '17 at 17:28

score 2 · Answer 20 · answered Jul 04 '17 at 02:23

as of v.4.0.x...

to clear the values, but also restore the placeholder use...

.html('<option></option>');  // defaults to placeholder

if it's empty, it will select the first option item instead which may not be what you want

.html(''); // defaults to whatever item is first

frankly...Select2 is such a pain in the butt, it amazes me it hasn't been replaced.

score 2 · Answer 21 · answered Jul 27 '17 at 20:24

After trying the first 10 solutions here and failing, I found this solution to work (see "nilov commented on Apr 7 • edited" comment down the page):

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2('data', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return '<option value="' + item.id + '">' + item.text + '</option>';
       });
       $select.html(options.join('')).change();
   };
})(jQuery);

The change is then made:

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

(The author originally showed var $select = $(this[1]);, which a commenter corrected to var $select = $(this[0]);, which I show above.)

this is the only one that worked for me... years later – Pedro Gabriel Mar 16 '21 at 07:30 — Pedro Gabriel, Mar 16 '21 at 07:30

score 2 · Answer 22 · answered Sep 10 '18 at 06:01

2

Use this code into your js file

$('#id').val('1');
$('#id').trigger('change');

answered Sep 10 '18 at 06:01

Nhoufy

53
2
9

score 2 · Answer 23 · answered May 13 '20 at 23:48

2

From select2 website,

$("#mySelect2ControlId").val(null).trigger("change");

answered May 13 '20 at 23:48

Programnik

1,449
1
9
13

score 2 · Answer 24 · answered May 25 '20 at 21:45

2

$("#customers_select").val([]).trigger('change')

this will remove values AND most important for me - it also remove an empty x button

answered May 25 '20 at 21:45

Игорь Хлебников

591
6
6

Yasser CHENIK · Answer 25 · 2022-05-04T14:42:20.267

Admin lte 3 with `Select2`.

After a lot of tries this is what worked for me :

Library at the top ( Modify position if it's conflicting with the bootstrap )

<link rel="stylesheet" href="/template/almasaeed2010/adminlte/plugins/select2/css/select2.min.css" >
<link rel="stylesheet" href="/template/almasaeed2010/adminlte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css" >

JS scripts ( After JQuery and before your .select2(... script )

<script src="/template/almasaeed2010/adminlte/plugins/select2/js/select2.full.min.js"></script>

HTML

<select name="mode_de_reglement" id="mode_de_reglement" >
     <option value="cheque">cheque</option>
     <option value="virement">virement</option>
     <option value="carte_bancaire">carte bancaire</option>
</select>

Initialization script :

$("#mode_de_reglement").select2({
     placeholder : "Mode de réglement"
});
$('#mode_de_reglement').val('');//setting starting value to empty because by default it selects the first value
$('#mode_de_reglement').trigger('change');//change to let the select2 library know you modified the value programmatically

Finally whenever the form gets reopened i refresh the select again using :

//... onclick="openModalNewRecord()"
$('#mode_de_reglement').val('');
$('#mode_de_reglement').trigger('change');

Here is the template i used AdminLte3

Also note that you can create select2 using

$("#mode_de_reglement").select2({
     placeholder : "Mode de réglement" ,
     allowClear : true 
});

Allow clear adds an X button to clear selection and show placeholder , but i don't use it unless that field is nullable in the database.

Note: Don't forget to set `style="width: 100% ;"` or the select 2 will be collapsed ! — Yasser CHENIK, Apr 28 '22 at 21:57

score 1 · Answer 26 · answered Aug 29 '16 at 05:58

Well whenever I did

$('myselectdropdown').select2('val', '').trigger('change');

I started getting some kind of lag after some three to four triggers. I suppose there's a memory leak. Its not within my code because if I do remove the this line, my app is lag free.

Since I have allowClear options set to true, I went with

$('.select2-selection__clear').trigger('mousedown');

This can be followed by a $('myselectdropdown').select2('close'); event trigger on the select2 dom element in case you wanna close the open suggestion drop down.

score 1 · Answer 27 · answered Mar 14 '17 at 13:26

1

I have tried above solutions but none worked with version 4x.

What i want to achieve is: clear all options but don't touch the placeholder. This code works for me.

selector.find('option:not(:first)').remove().trigger('change');

answered Mar 14 '17 at 13:26

Canser Yanbakan

3,780
3
39
65

If you use selector.find('option:not(:first)').html(''); it should work. – wazza Jun 15 '17 at 12:15

score 1 · Answer 28 · answered Apr 29 '17 at 17:32

1

Using select2 version 3.2 this worked for me:

$('#select2').select2("data", "");

Didn't need to implement initSelection

answered Apr 29 '17 at 17:32

shak

641
9
13

1

This was by far the simplest way for me to do it. The other methods did not work for me. – chevybow Sep 07 '18 at 18:35

score 1 · Answer 29 · edited Jan 09 '18 at 10:14

1

$('myselectdropdown').select2('val', '0')

where 0 is your first value of the dropdown

edited Jan 09 '18 at 10:14

Mittal Patel

2,732
14
23

answered Jan 09 '18 at 09:56

Momaad Jamshed Alam

21
2

score 1 · Answer 30 · answered May 05 '20 at 20:23

If you want to clear all select2 inputs when closing a modal for instance then you can add a class "select2" and set them all back to their place holders like so.

$('#myModal').on('hidden.bs.modal', function (e) {
    $(this)
        .find(".select2").select2({placeholder: "Choose an option"})
        .val('').trigger('change.select2');
});

This approach of resetting all at once can be used for forms either. The version is which this is working for me is 4.0.10

score 1 · Answer 31 · answered Aug 17 '20 at 14:25

1

This solution work for me (Select2 4.0.13)

$('#select').on("select2:unselecting", function (e) {
   $(this).val('').trigger('change');
   e.preventDefault();
});

answered Aug 17 '20 at 14:25

Andrea Fini

66
5

score 1 · Answer 32 · answered Jan 05 '22 at 11:29

1

This is working snippet for latest select 2 api.

Reset or Clear select2 input.

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

i.e.

$( ".reset" ).on('click',function(){
    $(".select2input").val([]).trigger('change');
});

answered Jan 05 '22 at 11:29

Vicky P

553
6
12

score 0 · Answer 33 · edited Aug 12 '15 at 20:24

0

Before you clear the value using this $("#customers_select").select2("val", ""); Try setting focus to any other control on reset click.

This will show the placeholder again.

edited Aug 12 '15 at 20:24

Patrick Kostjens

5,065
6
29
46

answered Aug 12 '15 at 15:13

user2243380

1
1

score 0 · Answer 34 · answered Jun 21 '16 at 09:27

0

The DOM interface, already keeps track of the initial state...

So doing the following is enough:

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

answered Jun 21 '16 at 09:27

Andrew Nartey

1

score 0 · Answer 35 · answered Aug 31 '16 at 18:38

One [very] hacky way to do it (I saw it work for version 4.0.3):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});

allowClear must be set to true
an empty option must exist in the select element

score 0 · Answer 36 · answered Feb 03 '17 at 14:55

0

In order to reset the values and the placeholder I just reinitiate the select2 element:

$( "#select2element" ).select2({
    placeholder: '---placeholder---',
    allowClear: true,
    minimumResultsForSearch: 5,
    width:'100%'
});

answered Feb 03 '17 at 14:55

Max

1,053
1
13
34

1

Rebuilding a house to clean a sink is not really a solution. – Felini Feb 27 '17 at 10:34
Very true, @Felini , but when the control doesn't provide a clean way to reset itself without calling the "change" event, you have to do what you have to do without hacking the control, unfortunately. I have validation listeners running on the change event for the select elements. Triggering the change event validates and show an error message that doesn't need to bee seen on a reset form. – WebTigers Jul 05 '21 at 13:09

score 0 · Answer 37 · answered Sep 04 '17 at 16:15

My solution is:

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });

score 0 · Answer 38 · answered Oct 08 '18 at 00:18

I dont know if anyone else experienced this, but once the code hit the trigger('change') my javascript just stopped, never returned form the trigger, and the rest of the function was never executed.

I am not familiar enough with jquerys trigger to say that this is expected on not. I got around it by wrapping it in a setTimeout, ugly but effective.

score 0 · Answer 39 · edited Dec 09 '20 at 11:14

<label for="RECEIVED_BY" class="control-label"> Received into store By </label>
<label class="pull-right">
  <button
    type="button"
    title="Clear Received into store By"
    class="receive_clear clear-button"
    aria-label="Select2 options"
  >
    x
  </button></label
>
<select type="text" class="clear_receive_info_by">
  <option value="">--Select--</option>
  <option value="value1">value1</option>
  <option value="value2">value2</option>
  <option value="value3">value3</option>
</select>

jQuery:

var $clear_receive_info_by = $(".clear_receive_info_by").select2();
$(".receive_clear").on("click", function () {
    $clear_receive_info_by.val(null).trigger("change");
});

score 0 · Answer 40 · edited Jan 22 '21 at 17:54

0

I've read all the answers and many have been deprecated.

This is how currently you can clear and set the place holder value:

// Clear and put a blank select placeholder
$("#MySelect").prop('disabled', false).find("option:gt(0)").remove();

edited Jan 22 '21 at 17:54

Suraj Rao

29,388
11
94
103

answered Jan 22 '21 at 17:52

Mauricio Solórzano

13
4

score 0 · Answer 41 · answered Nov 13 '21 at 11:12

0

this worked for me using select2 version Select2 4.0.5 $('.classToClear').select2().val('');

answered Nov 13 '21 at 11:12

ejay56

41
7

score 0 · Answer 42 · answered Oct 26 '22 at 00:59

0

$('#select_id').select2('data', null);

will reset the select2 and show the placeholder

answered Oct 26 '22 at 00:59

Adrian P.

5,060
2
46
47

score 0 · Answer 43 · answered Nov 27 '22 at 02:31

0

Ok, so the actual solution (for a common case where you have a "chose item" disabled and selected first item), is very simple, actually:

$("select.select2").trigger("reset").trigger("change")

answered Nov 27 '22 at 02:31

RRE Designs

237
2
3

score 0 · Answer 44 · edited Mar 29 '23 at 18:32

0

$(your_id_or_class).select2("data",null);

edited Mar 29 '23 at 18:32

Tyler2P

2,324
26
22
31

answered Mar 29 '23 at 07:01

Lokendra

36
3

2

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Mar 29 '23 at 18:32

score -2 · Answer 45 · answered Jan 16 '19 at 16:22

-2

I do this for this case:

  $('#select').val('');
  $('.select2.select2-container').remove();
  $('.select2').select2();

I change the select value into empty
I remove container for select2
Re-call select2

answered Jan 16 '19 at 16:22

Scramble

119
10

Reset select2 value and show placeholder

45 Answers45

Admin lte 3 with `Select2`.

Linked

Related

Reset select2 value and show placeholder

45 Answers45

Admin lte 3 with Select2.

Linked

Related

Admin lte 3 with `Select2`.