使用 jQuery 清除启用多选的 <select> 上的所有选择的快速方法？

Posted 2023-02-22

【中文标题】使用 jQuery 清除启用多选的 <select> 上的所有选择的快速方法？

【英文标题】：Quick way to clear all selections on a multiselect enabled <select> with jQuery?

【发布时间】：2011-01-16 07:39:21

【问题描述】：

我是否必须遍历所有的并设置删除“选定”属性或者有更好的方法吗？

【参考方案1】：

只需在您的<select> 中找到所有选定的<option> 标记并删除selected 属性：

$("#my_select option:selected").removeAttr("selected");

从 jQuery 1.6 开始，您应该使用 .prop 而不是删除属性：

$("#my_select option:selected").prop("selected", false);

【讨论】：

对于多选下拉，这不会清除显示的文本。

【参考方案2】：

为了清除所有选择，我这样使用它，它对我来说工作正常。 这是脚本：

 $("#ddlMultiselect").multiselect("clearSelection");

 $("#ddlMultiselect").multiselect( 'refresh' );

【讨论】：

此答案与问题无关。

这是什么库？多选不是 jQuery 或 jQueryUI 的一部分。

这是用于引导多选的可能

为我工作：jQuery(".select-access").multiselect("clearSelection") "s" lowerCase.

他指的是这个插件loudev.com/#usage，顺便说一句，“clearSelection”现在不起作用。改用“deselect_all”

【参考方案3】：

删除所有选择的最短和最快的方法是在 jQuery .val() 函数中传递空字符串：

$("#my_select").val('')

【讨论】：

只是一个警告，如果你有一个带有 value="" 的选项，这个方法会选择它，所以接受的答案是你的方式jsfiddle.net/yemgudc8

【参考方案4】：

这是清除多选或列表框的最佳方式：

 $("#drp_assign_list option[value]").remove();

【参考方案5】：

在 JQuery 中：

  $("#id option:selected").prop("selected", false);
  $("#id").multiselect('refresh');

【参考方案6】：

$("#ddlMultiselect").val('').trigger("change");

对于多选下拉菜单，它会清除显示的文本。

【参考方案7】：

jQuery 的:selected 选择器可能正是您要找的。​​p>

【参考方案8】：

在 javascript 中，

您可以使用多选下拉列表的所有选项列表，该列表将是一个数组。然后循环遍历它以使每个对象中的选定属性为 false。

for(var i=0;i<list.length;i++)

   if(list[i].Selected==true)
    
       list[i].Selected=false;
    

【讨论】：

问题是专门要求一种方法来做到这一点，而无需遍历整个列表（如果列表很长，可能会占用大量资源）

【参考方案9】：

您可以传递一个空数组来取消选择所有选择。这是一个例子。来自documentation

val() 允许您传递元素值数组。这很有用 在处理包含 、 和 s 等元素的 jQuery 对象时 .在这种情况下，输入和选项的值 匹配数组的元素之一将被选中或选中 而那些具有不匹配的元素之一的值 数组将未选中或未选中，具体取决于类型。

$('.clearAll').on('click', function() 
  $('.dropdown').val([]);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="dropdown" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<button class='clearAll'>Clear All Selection</button>

【参考方案10】：

$('.clearAll').on('click', function() 
  $('.dropdown').val([]);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="dropdown" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<button class='clearAll'>Clear All Selection</button>

【讨论】：

请在你的回答中添加一些解释:)

【参考方案11】：

$('.selectpicker').selectpicker('deselectAll');

https://developer.snapappointments.com/bootstrap-select/methods/

【讨论】：

如果您使用的是 bootstrap-select，这是一个有效的方法

【参考方案12】：

我尝试了很多解决方案并想出了这个。

下拉菜单的选项和选择仅使用此清除

$("#my-multi option:selected").prop("selected", false);
$("#my-multi option").remove();

但是界面没有更新。所以你必须这样做

$('#my-multi').multiselect('rebuild');

因此，最终的代码是

$("#my-multi option:selected").prop("selected", false);
$("#my-multi option").remove();
$('#my-multi').multiselect('rebuild');

欢迎提出建议和改进。

【讨论】：

$('#my-multi').multiselect('rebuild');这对我有用，谢谢兄弟:)

【参考方案13】：

假设您使用的是 David Stutz 的 Bootstrap 多选下拉菜单

$('#selectId').multiselect('deselectAll', false);

但由于某种原因，它在初始化方法中不起作用