36

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

以下是菜单示例：

<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

非常感谢你的协助。

新杰克

4

8 回答 8

44

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

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

例子

于 2012-10-09T15:02:01.270 回答
29

使用起来会不会更简单？：

document.getElementById("ddBusinessCategory").value = "";
于 2015-07-03T20:57:51.923 回答
13

你不需要任何循环。selectedIndex 属性“设置或返回集合中选定元素的索引<option>（从 0 开始） ”。
索引从 0 开始，因此如果将其设置为 -1，则不会选择任何索引。（设置为 0 将使第一个选项处于选中状态。）

function clearSelected(w){
  document.getElementById(w).selectedIndex = -1;
}
<a href="#" onclick="clearSelected('ddBusinessCategory');">clear</a>
于 2017-02-11T00:39:02.797 回答
9

您可以使用 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;
    }
  }

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

于 2014-02-05T08:21:43.057 回答
4

如果您使用的是 jquery，您可以这样做（我知道提出这个问题的人期待 js 的回答，但这可能对某人有所帮助）

$('#someid').find($('option')).attr('selected',false)
于 2014-06-02T13:18:32.800 回答
2

如果你不关心< IE8：

var checkedElements = document.querySelectorAll("#ddBusinessCategory :checked");

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

如果你不关心<IE9

Array.prototype.forEach.call(document.querySelectorAll("#ddBusinessCategory :checked"), function(el) { el.selected = false });

如果您想支持 IE7、IE6、FF3 及更早版本或觉得它更易于阅读，请使用 Chase 的答案。

于 2012-10-09T15:19:09.247 回答
1

如果您只想遍历选定的选项，我建议使用 while 循环。

var elements = document.getElementById("ddBusinessCategory").selectedOptions;
while (elements.length > 0)
{
    elements[0].selected = false;
}

当有多个选择时，Michel Sahli 的答案将不起作用，因为当您通过 for 循环进行时，值会elements.length发生变化。

也就是说， .selectedOptions 属性有点麻烦（请参阅Is selectedOptions broken or...?）所以可能不值得您仅通过循环选择选项获得任何微小的节省。

于 2015-05-21T00:23:53.267 回答
0

一旦你从对象中的 DOM 中选择选项元素，但是你这样做，（我会假装它们都有一个类名）只需删除该属性：

答案：

options = document.getElementsByClassName('optionsClassName');

for (let i = 0; i < options.length; i++) {
  options[i].removeAttribute('selected');
}

The Reason: HTML reads to see if a selected attribute exists. You can just have "selected" as an attribute without any value, and it will assume that option is selected. So, it works if you remove the attribute. Selecting will insert a new "selected" attribute. No worry.

于 2020-05-25T18:47:50.657 回答