在具有多个和optgroups的选择菜单中取消选择所选选项 [英] Deselect selected options in select menu with multiple and optgroups

问题描述

我希望能够点击一个链接，以便能够在选择菜单中取消选择所有预先选择的选项，其中包含多个选择启用和选项组。

I want to be able to with a click of a link to be able to deselect all pre-selected options in a select menu with multiple select enable and with option groups.

以下是菜单示例：

<select name="ddBusinessCategory" id="ddBusinessCategory" class="f1" style="width:280px;height:200px" multiple="multiple">
<option value="">Select One</option>
<optgroup label="Abrasives" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="4" selected="selected">Abrasives</option>
</optgroup>
<optgroup label="Abstracters" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="5">Abstracters</option>
</optgroup>
<optgroup label="Abuse Information &amp; Treatment Centers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="6" selected="selected">Abuse Information &amp; Treatment Centers</option>
</optgroup>
<optgroup label="Accountants" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="7">Accountants</option>
<option value="2672">Certified Public Accountants - </option>
<option value="2673">Public Accountants - </option>
</optgroup>
<optgroup label="Accounting Services" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="8">Accounting Services</option>
</optgroup>
<optgroup label="Acoustical Materials - Wholesale &amp; Manufacturers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="9">Acoustical Materials - Wholesale &amp; Manufacturers</option>
</optgroup>
</select>

您将看到两个被选中..我希望能够取消选择这些预选的。

You will see two are selected.. I want to be able to deselect these preselected ones.

不想使用jquery，只想使用javascript

DONT want to use jquery, just want to use javascript

非常感谢您的帮助。

neojakey

推荐答案

以下函数应循环遍历所有选项并取消选择它们。

The following function should loop through all the options and unselect them.

HTML

<a href="#" onclick="clearSelected();">clear</a>

JAVASCRIPT

 function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }

编辑：

我不支持将事件处理程序直接放在元素上。如果您有选项，请为元素提供某种类型的id / name，并在JavaScript代码中绑定事件处理程序。

I don't endorse putting the event handler directly on the element. If you have the option, give the element some type of id/name and bind the event handler in your JavaScript code.

示例

EXAMPLE

这篇关于在具有多个和optgroups的选择菜单中取消选择所选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！