Abwählen ausgewählter Optionen im Auswahlmenü mit mehreren und optgroups

Question

Ich möchte mit einem Klick auf einen Link in der Lage sein, alle vorgewählten Optionen in einem Auswahlmenü mit mehreren Auswahl aktivieren und mit Optionsgruppen abzuwählen. Hier

ist ein Beispiel für das Menü:

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

Sie werden sehen, zwei ausgewählt werden .. Ich möchte diese vorausgewählten abzuwählen können.

DONT wollen jQuery verwenden, wollen einfach nur Javascript für Ihre Unterstützung

Vielen Dank verwenden.

neojakey

Answer 1

Die folgende Funktion sollte eine Schleife durch alle Optionen und abzuwählen sie.

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:

Ich unterstütze nicht die Event-Handler auf dem Element direkt setzen. Wenn Sie die Option haben, geben Sie dem Element einen Typ von ID/Name und binden Sie den Event-Handler in Ihren JavaScript-Code.

EXAMPLE

Answer 2

Wenn Sie nicht über < IE8 egal:

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

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

Wenn Sie kümmern sich nicht um < IE9

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

Verwenden Sie die Antwort von Chase wenn Sie möchten IE7, IE6, FF3 und früher unterstützen oder fühlen sich leichter zu lesen.

Answer 3

Sie könnten den Code aus Chase mit der JavaScript-Eigenschaft "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; 
    } 
    } 

In diesem Fall, dass Sie eine Schleife zu tun vereinfachen mit die bereits ausgewählten Optionen und nicht alle Optionen.

Answer 4

Wenn Sie mit jquery Sie tun können (ich weiß die Person, die fragte dies eine js Antwort erwartet, aber dies könnte jemand helfen)

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

Answer 5

Wenn Sie nur durch nur die ausgewählten Optionen Schleife möchten, Ich schlage eine While-Schleife vor.der Wert von elements.length Änderungen

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

Die Antwort von Michel Sahli wird nicht funktionieren, wenn mehrere Auswahlmöglichkeiten gibt es, weil, wie Sie durch den for-Schleife Fortschritt.

Das .selectedOptions-Attribut ist ein bisschen mühsam (siehe Is selectedOptions broken or...?), also wahrscheinlich nicht wert, was auch immer kleine Einsparungen Sie nur durchschleifen ausgewählte Optionen erhalten.

Answer 6

Wäre es nicht einfacher, nur ?:

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

Answer 7

Sie keine Schleifen brauchen zu verwenden. Die selectedIndex-Eigenschaft "Sets or returns the index of the selected <option> element in the collection (starts at 0)".
Die Indizierung beginnt bei 0, also wenn Sie es auf -1 setzen, sind keine ausgewählt. (Einstellung auf 0 würde die erste Option ausgewählt lassen.)

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