'Reset select2 value and show placeholder

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;
   }
});

Solution 1:^[1]

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
});

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

To reset:

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

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

Solution 2:^[2]

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([]);

Solution 3:^[3]

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

Solution 4:^[4]

With Select2 version 4.0.9 this works for me:

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

Solution 5:^[5]

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.

Solution 6:^[6]

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

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

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

if you have change events bound to it

Solution 7:^[7]

Use this :

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

Solution 8:^[8]

TO REMOVE SELECTED VALUE

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

TO CLEAR OPTION VALUES

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

Solution 9:^[9]

This is the correct way:

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

I am using the latest release of Select2.

Solution 10:^[10]

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");

Solution 11:^[11]

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();

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

Solution 12:^[12]

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");

Solution 13:^[13]

You can clear te selection by

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

But it wont turn you back to your placeholder.

So its a half solution

Solution 14:^[14]

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");

Solution 15:^[15]

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([]);
 });

Solution 16:^[16]

For the place holder

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

To reset a select 2

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

Hope this helps

Solution 17:^[17]

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>

Solution 18:^[18]

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

Solution 19:^[19]

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.

Solution 20:^[20]

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.)

Solution 21:^[21]

Use this code into your js file

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

Solution 22:^[22]

From select2 website,

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

Solution 23:^[23]

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

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

Solution 24:^[24]

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.

Solution 25:^[25]

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');

Solution 26:^[26]

Using select2 version 3.2 this worked for me:

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

Didn't need to implement initSelection

Solution 27:^[27]

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

where 0 is your first value of the dropdown

Solution 28:^[28]

This solution work for me (Select2 4.0.13)

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

Solution 29:^[29]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Hakan FÄ±stÄ±k
Solution 3	SnareChops
Solution 4
Solution 5	Marcio Mazzucato
Solution 6	Sean
Solution 7	GGO
Solution 8	Shanka SMS
Solution 9
Solution 10	Zabith Rafeek
Solution 11	tech_boy
Solution 12	Mahmut AydÄ±n
Solution 13	Shahzad Barkati
Solution 14	Chad Kuehn
Solution 15	Alisha Lamichhane
Solution 16	Rinto George
Solution 17
Solution 18
Solution 19	mangonights
Solution 20	guero64
Solution 21	Nhoufy
Solution 22	Programnik
Solution 23	Ð˜Ð³Ð¾Ñ€ÑŒ Ð¥Ð»ÐµÐ±Ð½Ð¸ÐºÐ¾Ð²
Solution 24	Akhilesh Balachandder
Solution 25	Canser Yanbakan
Solution 26	shak
Solution 27	Mittal Patel
Solution 28	Andrea Fini
Solution 29	Patrick Kostjens

'Reset select2 value and show placeholder

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]