複数のoptgroupsを持つ選択メニューで選択したオプションの選択解除

Question

リンクをクリックすると、複数のselect enableおよびoptionグループを持つselectメニューのすべての選択済みオプションの選択を解除できます。ここで

はメニューの一例です：

<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> 

次の2つが選択されて表示されます..私は、これらの事前に選択されたものを選択解除することができるようにしたいです。

DONTはちょうどあなたの援助のためのjavascript

感謝を使いたい、jqueryのを使用したいです。

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; 
    } 
    } 

EDIT。オプションがある場合は、要素にいくつかのタイプのID /名前を与え、JavaScriptコードでイベントハンドラをバインドします。

EXAMPLE

Answer 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およびそれ以前のバージョンをサポートしたいと思っています。

Answer 3

あなたがしてループを行う。この場合

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; 
    } 
    } 

をjavascriptのプロパティ "selectedOptions" とのチェイスからのコードを簡素化することができ既に選択されているオプションであり、すべてのオプションではありません。

Answer 4

あなただけの唯一の選択したオプションをループしたい場合は、あなたが行うことができますjqueryの（私はこれを尋ねた人はJSの答えを期待している知っているが、これは、誰かを助けるかもしれない）

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

Answer 5

を使用している場合は、 whileループをお勧めします。

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

ミシェルSahliによって答えは、あなたがelements.length変更のループの値を進めるとするので、複数の選択肢がある場合には動作しません。

つまり、.selectedOptions属性はちょっと面倒（Is selectedOptions broken or...?参照）なので、選択したオプションをループするだけで、少しでも節約できます。

Answer 6

は、それだけ？：あなたは任意のループを必要としない

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

Answer 7

を使用する方が簡単ではないでしょう。 selectedIndexプロパティは "Sets or returns the index of the selected <option> element in the collection (starts at 0)"です。
インデックス付けは0から開始されるため、-1に設定すると選択されません。 （0に設定すると、最初のオプションが選択されたままになります）。

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