Deseleccione las opciones seleccionadas en el menú de selección con grupos múltiples y opcionales

Question

Deseo poder hacer clic en un enlace para poder anular la selección de todas las opciones preseleccionadas en un menú de selección con múltiples habilitaciones de selección y grupos de opciones.

Aquí se muestra un ejemplo del 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> 

verá dos se seleccionan .. Quiero ser capaz de anular la selección de estos preseleccionados.

no desea utilizar jQuery, sólo quieren utilizar JavaScript

Muchas gracias por su ayuda.

neojakey

Answer 1

La siguiente función debe recorrer todas las opciones y anular la selección de ellos.

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

EDITAR:

no respaldo poner el controlador de eventos directamente en el elemento. Si tiene la opción, dele al elemento algún tipo de id/nombre y vincule el controlador de eventos con su código JavaScript.

EXAMPLE

Answer 2

Si no se preocupan por < IE8:

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

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

Si no se preocupan por < IE9

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

Usar la respuesta de Chase si desea admitir IE7, IE6, FF3 y versiones anteriores o sentir que es más fácil de leer.

Answer 3

Se podría simplificar el código de Chase con los "selectedOptions" propiedad Javascript

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

En este caso lo hace un bucle con las opciones ya seleccionadas y no todas las opciones.

Answer 4

Si está utilizando jQuery que puede hacer (sé que la persona que hizo esto se espera una respuesta js pero esto podría ayudar a alguien)

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

Answer 5

Si sólo desea colocar a través de sólo las opciones seleccionadas, Sugiero un ciclo while.

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

La respuesta de Michel Sahli no funciona cuando hay múltiples selecciones, ya que a medida que avanza a través del bucle el valor de elements.length cambios.

Dicho esto, el atributo .selectedOptions es un poco molesto (ver Is selectedOptions broken or...?) por lo que probablemente no valga la pena ni los pequeños ahorros que obtengas al recorrer las opciones seleccionadas.

Answer 6

¿No sería más fácil de usar simplemente ?:

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

Answer 7

No es necesario ningún bucle. La propiedad selectedIndex "Sets or returns the index of the selected <option> element in the collection (starts at 0)".
La indexación comienza en 0, por lo tanto, si la configura en -1, se seleccionan ninguno. (establecer en 0 dejaría la primera opción seleccionada.)

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