Select2取消选择所有值

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/

Answer 1

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

Answer 2

Try this instead:

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

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

Demo here

Answer 3

如果使用Select2版本4.0，则需要使用新语法：

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

Answer 4

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

这样您就可以取消选择已经“即时”插入的标记选项。

Answer 5

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

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

Answer 7

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.

Answer 8

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 .

Answer 9

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