Select2 deselect all values

Question

I want to deselect all values with one click without using each id seperately.

I fiddled around for a while, but this deselect only first value. Any suggestions?

This is how I try to deselect:

$( "#mybutton" ).click(function() {    
   $("select").select2('val', '')
});

http://jsfiddle.net/6hZFU/75/

Muscadel

Please add code to a question that contains a fiddle. – Lenoralenore

Answer 1

Try this instead:

$('select').select2({
    placeholder: "select me"
});

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

Demo here

Culley

@danip, what version of select2 are you using, bunch of changes with 4.0, added a new answer below – Fluting

@Fluting yes, I had problems with 4.0 but I still don't get why the each syntax works and multiple selector doesn't – Periapt

Answer 2

$("select").val('').change();

That is all :) http://jsfiddle.net/6hZFU/78/

Explanation: when you change value of any input or select through JavaScript browser will not fire change event for that change (that is how specs say).

When you fire change event select2 will catch up and reflect new value of select.

Jotun

Yes, because when you change value of any input or select through JavaScript browser will not fire change event for that change. When you fire change event select2 will catch up and reflect new value of select. – Jotun

Your last comment should be added to your answer for clarification. Good explanation. – Mephitic

Answer 3

If using Select2 version 4.0, you will need to use the new syntax:

$("select").val(null).trigger("change");

Fluting

This does not work on version 4, you have to enter empty string inside the val function. .val(''). – Farley

this is working in my select2 4.1 version – Watthour

Answer 4

In case someone is interested in the Select2 native configuration solution (no separate button).

As of time of writing (select2 v 4), Select2 can add a button to clear multiselection. No need for <option></option> workaround for placeholder to appear:

$('#my-select').select2({
    placeholder: "Select something",
    allowClear: true
});

From the documentation.

Diplegia

Answer 5

$('#destinatariMail').val("-1").trigger("change");

This way you will deselect also tagged options that have been inserted "on-the-fly".

Llama

Answer 6

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

Wilkins

Exactly what I need! Thanks dude. – Fleshly

Answer 7

If you want to clear multiple multiselect dropdown using Select2 v4 api, here is a simple way:

$("li.select2-selection__choice").remove();
$(".select2").each(function() { $(this).val([]); });

No focus on dropdown and clean both "select" and "Select2" elements ;)

Federal

Answer 8

You need use the class of your select(select2_single)

Example:

$('#button_clear').click(function () 
{
    $('.select2_single').select2('val',''); 
});

---

Debes usar la clase de tus select

Ej:

$('#button_clear').click(function () 
{
    $('.select2_single').select2('val',''); 
});

Kin

Please post answers in english. Thank you – Fideism

Could you provide your answer in english. Thanks – Farrel

Ok, no problem, sorry for this problem! – Kin

Ok robert, i try provide answers in inglish! – Kin

Answer 9

try this

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

Darlington

Answer 10

Try this, it's working perfectly.

$('#form-search-amenities > option').prop("selected", false);
$("li.select2-selection__choice").remove();

#form-search-amenities should e replace by ID of your <select> dropdown.

Loader