Javascript 使用多个和 optgroups 在选择菜单中取消选择选定的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12802739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deselect selected options in select menu with multiple and optgroups
提问by neojakey
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.
我希望能够通过单击链接来取消选择具有多个选择启用和选项组的选择菜单中的所有预选选项。
Here is an example of the menu:
这是菜单的示例：
<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 & Treatment Centers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="6" selected="selected">Abuse Information & 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 & Manufacturers" style="background:#F5F5F5;border-bottom:1px #EEE solid">
<option value="9">Acoustical Materials - Wholesale & Manufacturers</option>
</optgroup>
</select>
You will see two are selected.. I want to be able to deselect these preselected ones.
你会看到两个被选中..我希望能够取消选择这些预选的。
DONT want to use jquery, just want to use javascript
不想用jquery，只想用javascript
Many thanks for your assistance.
非常感谢你的协助。
neojakey
新杰基
回答by Chase
The following function should loop through all the options and unselect them.
以下函数应遍历所有选项并取消选择它们。
HTML
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;
}
}
EDIT:
编辑：
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.
我不赞成将事件处理程序直接放在元素上。如果可以，请为元素提供某种类型的 id/name 并在 JavaScript 代码中绑定事件处理程序。
回答by Kirby L. Wallace
Would it not be simpler to just use?:
只使用它不是更简单吗？：
document.getElementById("ddBusinessCategory").value = "";
回答by Michel Sahli
You could simplify the code from Chase with the javascript property "selectedOptions"
您可以使用 javascript 属性“selectedOptions”简化 Chase 中的代码
HTML
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;
}
}
In this case you do a loop with the already selected options and not all options.
在这种情况下，您使用已选择的选项而不是所有选项进行循环。
回答by xaqxaqxaq
You don't need any loops. The selectedIndex property "Sets or returns the index of the selected <option>element in the collection (starts at 0)".
Indexing starts at 0 so if you set it to -1 none are selected. (setting to 0 would leave the first option selected.)
你不需要任何循环。selectedIndex 属性“设置或返回<option>集合中所选元素的索引（从 0 开始）”。
索引从 0 开始，因此如果将其设置为 -1，则不会选择任何。（设置为 0 将保持选中第一个选项。）
function clearSelected(w){
document.getElementById(w).selectedIndex = -1;
}
<a href="#" onclick="clearSelected('ddBusinessCategory');">clear</a>
回答by astroanu
If you are using jquery you can do (i know the person who asked this is expecting a js answer but this might help someone)
如果你使用 jquery，你可以做（我知道问这个的人期待一个 js 答案，但这可能对某人有帮助）
$('#someid').find($('option')).attr('selected',false)
回答by Jan Sommer
If you don't care about < IE8:
如果你不关心 < IE8：
var checkedElements = document.querySelectorAll("#ddBusinessCategory :checked");
?for(var i = 0, length = checkedElements.length; i < length; i++) {
checkedElements[i].selected = false;
}?
If you don't care about < IE9
如果你不在乎 < IE9
Array.prototype.forEach.call(document.querySelectorAll("#ddBusinessCategory :checked"), function(el) { el.selected = false });
Use the answer from Chase if you want to support IE7, IE6, FF3 and earlier or feel it's easier to read.
如果您想支持 IE7、IE6、FF3 及更早版本或感觉更易于阅读，请使用 Chase 的答案。
回答by weblorin
If you only want to loop through only the selected options, I suggest a while loop.
如果您只想遍历选定的选项，我建议使用 while 循环。
var elements = document.getElementById("ddBusinessCategory").selectedOptions;
while (elements.length > 0)
{
elements[0].selected = false;
}
The answer by Michel Sahli will not work when there are multiple selections, because as you progress through the for loop the value of elements.lengthchanges.
当有多个选择时，Michel Sahli 的答案将不起作用，因为当您在 for 循环中进行时，值会elements.length发生变化。
That said, the .selectedOptions attribute is a bit troublesome (see Is selectedOptions broken or...?) so probably not worth whatever tiny savings you get by only looping through selected options.
也就是说， .selectedOptions 属性有点麻烦（请参阅selectedOptions 是否已损坏或...？）因此可能不值得仅通过循环选择选项而获得的任何微小节省。
回答by user945389
Once you select the option elements from the DOM in an object however you do that, (I will pretend they all have a class name) just remove the attribute:
一旦你从对象中的 DOM 中选择了选项元素，不管你这样做，（我假设它们都有一个类名）只需删除属性：
The Answer:
答案：
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.
原因：HTML 读取以查看所选属性是否存在。您可以将“selected”作为没有任何值的属性，它会假设该选项被选中。因此，如果您删除该属性，它会起作用。选择将插入一个新的“选定”属性。别担心。
