取消选择具有多个选项和选择组的选择菜单中的选定选项

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

这是菜单的例子：

<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

来源

2012-10-09 neojakey

下面的函数应该通过所有选项循环，并取消他们。

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

来源

2012-10-09 15:02:01 Chase

辉煌@相当多的感谢..正是我想要的..！ – neojakey

很高兴听到它，祝你好运！ – Chase

你的回答对我很有帮助，但我认为你可以删除if（elements [i] .selected）** **？我是否正确。 –

如果你不关心< 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和更早版本，或者觉得它更易于阅读。

来源

2012-10-09 15:19:09

你可以从大通与JavaScript属性 “selectedOptions”

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-05 08:21:43

如果您正在使用jQuery你可以做（我知道是谁问这个期待一个JS答案的人，但是这可能帮助别人）

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

来源

2014-06-02 13:18:32 astroanu

如果你只通过唯一选定的选项要循环，我建议一个while循环。

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

当有多个选择，因为当你通过elements.length改变for循环的价值进展米歇尔沙利答案将无法正常工作。

也就是说，.selectedOptions属性有点麻烦（请参阅Is selectedOptions broken or...?），因此可能不值得通过循环选定选项获得的小节省。

来源

2015-05-21 00:23:53 weblorin

这岂不是更简单的只使用？：

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

来源

2015-07-03 20:57:51

这应该是答案 –

感谢信Nick的投票。 ;-)我至少已经过来找到我的“第一个答案徽章”（如果有这样的事情，如果没有，应该有。;-)） –

你不需要任何环路。 selectedIndex属性“0”。
索引编制从0开始，所以如果您将其设置为-1，则不会选择任何编号。（设置为0会使第一个选项被选中。）

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

来源

2017-02-11 00:39:02 xaqxaqxaq

取消选择具有多个选项和选择组的选择菜单中的选定选项

回答

相关问题