在具有多个和optgroups的选择菜单中取消选择所选选项

Question

我希望能够通过单击链接来取消选择具有多个选择启用和选项组的选择菜单中的所有预选选项.

以下是菜单示例:

<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>

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

不想使用jquery,只想使用javascript

非常感谢你的协助.

neojakey

Answer 1

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

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代码中绑定事件处理程序.

例

Answer 2

使用它会不简单吗？:

document.getElementById("ddBusinessCategory").value = "";

Answer 3

您可以使用javascript属性"selectedOptions"简化Chase中的代码

HTML

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

JAVASCRIPT

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

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

在这种情况下,您使用已选择的选项进行循环,而不是所有选项.

Answer 4

你不需要任何循环.selectedIndex属性" 设置或返回<option>集合中所选元素的索引(从0开始) ".
索引从0开始,因此如果将其设置为-1,则不选择任何索引.(设置为0将保留选中的第一个选项.)

function clearSelected(w){
  document.getElementById(w).selectedIndex = -1;
}
<a href="#" onclick="clearSelected('ddBusinessCategory');">clear</a>

Answer 5

如果你使用jquery，你可以这样做（我知道问这个问题的人期待一个js答案，但这可能对某人有帮助）

$('#someid').find($('option')).attr('selected',false)