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

<强> EXAMPLE

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属性＆＃34; Sets or returns the index of the selected <option> element in the collection (starts at 0)＆＃34;。
索引从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)

Answer 6

如果你不在乎＆lt; IE8：

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

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

如果你不在乎＆lt; IE9

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

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

Answer 7

如果您只想循环选择所选的选项，我建议使用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...?）所以可能不值得通过循环选择选项获得的任何微小节省。

Answer 8

一旦您从对象中的DOM中选择了选项元素，就可以这样做，（我会假装它们都有一个类名），只需删除属性即可：

答案：

options = document.getElementsByClassName('optionsClassName');

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

原因： HTML读取以查看是否存在所选属性。您可以只将“ selected”作为没有任何值的属性，并且将假定已选择该选项。因此，如果删除该属性，它将起作用。选择将插入一个新的“选定”属性。别担心。

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

8 个答案: