CODEWITHSUNDEEP
javascriptjqueryhtmlselectionjquery-select2
Jaanus
Jaanus

Reputation: 16541

Select2 deselect all values

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/

Upvotes: 49

Views: 77662

Answers (10)

Anoop Babu
Anoop Babu

Reputation: 188

try this

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

Upvotes: 1

Roman Susi
Roman Susi

Reputation: 4199

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.

Upvotes: 8

greg
greg

Reputation: 433

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

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

Upvotes: 3

Munawar Ali
Munawar Ali

Reputation: 1

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.

Upvotes: 0

tech_boy
tech_boy

Reputation: 195

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

Upvotes: 2

C47
C47

Reputation: 661

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

Upvotes: 1

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

$("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.

Upvotes: 75

Bulzib Rugulus
Bulzib Rugulus

Reputation: 11

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

Upvotes: 1

Steve
Steve

Reputation: 2666

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

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

Upvotes: 22

Sergio
Sergio

Reputation: 28837

Try this instead:

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

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

Demo here

Upvotes: 29

Related Questions