jQuery Select2 取消选择所有值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18782223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 22:30:46  来源:igfitidea点击:

Select2 deselect all values

javascriptjqueryhtmlselectionjquery-select2

提问by Jaanus

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

我想一键取消选择所有值,而不id单独使用每个值。

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/

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

采纳答案by Sergio

Try this instead:

试试这个:

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

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

Demo here

演示在这里

回答by Ivan Ivani?

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

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

这就是全部:) 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).

说明:当您更改任何输入的值或通过 JavaScript 浏览器选择时,不会触发该更改的更改事件(规范是这么说的)。

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

当您触发更改事件时,select2 将赶上并反映 select 的新值。

回答by Steve

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

如果使用 Select2 4.0 版,则需要使用新语法:

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

回答by Roman Susi

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

如果有人对 Select2 本机配置解决方案感兴趣(没有单独的按钮)。

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:

在撰写本文时(select2 v 4),Select2 可以添加一个按钮来清除多选。不需要<option></option>出现占位符的解决方法:

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

From the documentation.

文档中

回答by greg

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

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

通过这种方式,您还可以取消选择已“即时”插入的标记选项。

回答by Bulzib Rugulus

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

如果要使用 Select2 v4 api 清除多个多选下拉列表,这里有一个简单的方法:

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

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

不关注下拉列表并清除“select”和“Select2”元素;)

回答by tech_boy

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.

这是一种黑客,你不必 trigger change.

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

or

或者

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

回答by Munawar Ali

Try this, it's working perfectly.

试试这个,它完美地工作。

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

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

#form-search-amenities应该用<select>下拉菜单的 ID 替换。

回答by C47

You need use the class of your select(select2_single)

您需要使用选择的类(select2_single

Example:

例子:

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


Debes usar la clase de tus select

Debes usar la clase de tus select

Ej:

Ej:

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