取消選擇具有多個選項和選擇組的選擇菜單中的選定選項

我希望能夠通過單擊鏈接來取消選擇具有多個選擇啓用和選項組的選擇菜單中的所有預選選項。取消選擇具有多個選項和選擇組的選擇菜單中的選定選項

這是菜單的例子：

<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

取消選擇具有多個選項和選擇組的選擇菜單中的選定選項

回答

相關問題