使用jQuery在多选下拉列表中取消选择所有元素

Question

我有一个多选下拉框，如下所示，我已经选择了选项"Test 2"和"Test 3"。

<select id="edit-rec" class="form-select" multiple="multiple" name="rec[]">
<option value="6012">Test 1</option>
<option value="8436">Test 2</option>
<option value="4689">Test 3</option>
<option value="6784">Test 4</option>
</select>

我有一个名为“取消选择所有”的按钮。当点击此按钮时，应该取消选择所有已选择的项目。在这种情况下，我之前选择的项目“Test 2”和“Test 3”现在应该变为未选择状态。

如何使用jQuery实现这一功能？

- Fero

Answer 1

$("#edit-rec option:selected").removeAttr("selected");

- Chuck Norris

---

建议使用 $("#edit-rec option:selected").prop("selected", false);。 - Madeyedexter

Answer 2

尝试 -

$("#edit-rec > option").attr("selected",false);

示例 - http://jsfiddle.net/LhSBu/

- ipr101

---

你的代码看起来很不错。但是你能解释一下这个语法$("#edit-rec > option")吗？ - Fero

$("#edit-rec > option") 应该选择 #edit-rec 元素的直接子元素中的任何 option 元素。请参阅 - http://api.jquery.com/child-selector/ - ipr101

我建议删除>部分。在这种情况下，它没有意义，并且将<optgroup>用作<option>的父级会导致意外行为。 - Robin Castlin

现在你需要使用 prop 而不是 attr，但是没错。 - Jason C

Answer 3

我发现在多选下拉列表中取消选择所有选项的最简单方法是使用 .val([])。

$("#select").val([]);

- Maykonn

---

在我的情况下，$("select").val([]); 完美地运行了，谢谢！ - Nezir

Answer 4

它将从多选下拉列表中删除所有已选选项：

$('#ddlTradeShow').multiselect("clearSelection");

- SPnL

---

请在您的答案中添加一些解释，以使其更易读。 - Aleksej

还没有查看文档，但它可以工作 :) - Usama Saleem

Answer 5

当单击单选按钮时，您可以使用此代码：

$("#edit-rec  option").each(function(){

    this.selected=false;

});

- M S

Answer 6

$("#edit-rec option:selected").removeAttr("selected");

- Haim Evgi

Answer 7

可以像这个JS Fiddle一样设置单选按钮的点击事件。 http://jsfiddle.net/x5ck3/

$('#rdClear').click(

function() {
    $("#edit-rec option:selected").removeAttr("selected");
});

- Chris

Answer 8

$("#butt").click(function () {
    $("#edit-rec > option").removeProp("selected");
});

新版的 jQuery 是正确的。

- sunpietro

---

非常糟糕的想法，来自 https://api.jquery.com/removeProp/。这将完全删除属性，并且一旦删除，就无法再次添加到元素中。相反，使用.prop()将这些属性设置为false。 - MikeT

Answer 9

现在API直接提供了另一种可能性：

$('#edit-rec').multiSelect('deselect_all');

运行良好，您可以在此找到更多相关选项：http://loudev.com/

- Jean-Loup Becquet

Answer 10

您可以使用原始的HTMLSelectElement DOM接口，而且无需迭代所有<option>元素。可以使用selectedIndex或value：

$('#edit-rec')[0].selectedIndex = -1;

或者：

$('#edit-rec')[0].value = '';

无论是否设置multiple属性，这两种方法都可以使用。请参见this fiddle以获取各种方法的示例。

---

PS：对于多个元素，你可以使用jQuery的.each（但要小心从回调函数中返回非假值），或者DOM集合的.forEach（返回值无关紧要）：

$('.all-the-selects').each((_,s) => s.selectedIndex = -1);

或者：

$('.all-the-selects').get().forEach(s => s.selectedIndex = -1);

- Jason C