清除多选 jquery-select2

Posted 2023-05-07

【中文标题】清除多选 jquery-select2

【英文标题】：Clear multiple select jquery-select2

【发布时间】：2018-07-02 04:52:32

【问题描述】：

我正在尝试为 jquery-select2 多选创建一个重置按钮。我不知道为什么我的解决方案不起作用。

html：

<select id="workload-selector" class="js-source-states-2" multiple="multiple" style="width: 100%">             
  <option value="haha">haha</option>
  <option value="haha2">haha2</option>
  <option value="haha3">haha3</option>
</select>

<button id="reset">
Reset
</button>

javascript：

$("#workload-selector").select2();
$("#reset").click(function()
  $("#workload-selector option:selected").removeAttr("selected");
);

我是在 jsFiddle 上实现的： https://jsfiddle.net/DTcHh/41975/

【问题讨论】：

可能重复***.com/questions/15205262/…

【参考方案1】：

select2 多次将值保存在数组中 你需要做的就是

$("#workload-selector").val([]).change();

【讨论】：

这是唯一真正适用于多选的答案。

【参考方案2】：

你可以这样做：

$("#workload-selector").select2('val', '');

根据docs，这也有效：

$("#workload-selector").val("");
$("#workload-selector").trigger("change");

【讨论】：

不适用于多选。它使一个空标签。

【参考方案3】：

我已经做到了，这是我的阐述示例

$("#reset").click(function()
  $("#workload-selector").val(null).trigger('change');
);

【讨论】：

这里是关于清除 select2 值的文档，不管是多个还是单个...select2.org/programmatic-control/…

很好的答案老兄，我非常感谢你。 :)

【参考方案4】：

在文档https://select2.org/programmatic-control/add-select-clear-items#clearing-selections 中说我需要设置 null 值。选择有多个选择时，它给了我一个空白的选项。但是如果设置不存在值，它通常对我来说很清楚。

例如： 如果你有选项：

<select id="mySelect2" multiple="multiple">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

这通常清除选择。

$('#mySelect2').val(-100).trigger('change');