Forma fácil de seleccionar rápidamente un grupo de opciones completo en el cuadro de selección

Question

Tengo un cuadro de selección en el que puedo seleccionar varias opciones. En el cuadro de selección, hay varios grupos de opciones. ¿Existe una manera fácil de seleccionar un grupo de opciones completo a la vez en javascript?

Answer 1

sugiere emplear jQuery (u otro marco) para manejar rápidamente selecciones DOM. Dé una clase a cada grupo de opciones para que sea más fácil obtenerlo.

$("optgroup.className").children().attr('selected','selected'); 

Si desea seleccionar el grupo entero basado en el usuario seleccionar el grupo, haga lo siguiente:

$("optgroup.className").select(function(e) { 
    $(this).children().attr('selected','selected'); 
}); 

** Ambos ejemplos no se han probado pseudo-código, sino que deben trabajar con un mínimo cambios, si es necesario.

Si no puede usar un marco, tendrá que recorrer el DOM usted mismo para encontrar el grupo de opciones y secundarios. Puede adjuntar un oyente al elemento select para tomar el elemento que se está seleccionando y luego recorrerlo de esa manera.

Answer 2

jQuery:

$('#myoptgroup option').attr('selected', true); 

Answer 3

Normalmente estoy en contra de usar jQuery para trabajos simples como este pero puedo ver su valor aquí. Sin embargo, si se prefiere una solución no jQuery que tendrá las ventajas de utilizar ninguna biblioteca, la introducción de ningún ID espurias o clases y correr más rápido, aquí está uno:

<script type="text/javascript"> 

function selectOptGroupOptions(optGroup, selected) { 
    var options = optGroup.getElementsByTagName("option"); 
    for (var i = 0, len = options.length; i < len; i++) { 
     options[i].selected = selected; 
    } 
} 

function selectOptGroup(selectId, label, selected) { 
    var selectElement = document.getElementById(selectId); 
    var optGroups = selectElement.getElementsByTagName("optgroup"); 
    var i, len, optGroup; 
    for (i = 0, len = optGroups.length; i < len; i++) { 
     optGroup = optGroups[i]; 
     if (optGroup.label === label) { 
      selectOptGroupOptions(optGroup, selected); 
      return; 
     } 
    } 
} 

</select> 

<select id="veg" multiple> 
    <optgroup label="roots"> 
     <option>Swede</option> 
     <option>Carrot</option> 
     <option>Turnip</option> 
    </optgroup> 
    <optgroup label="leaves"> 
     <option>Spinach</option> 
     <option>Kale</option> 
    </optgroup> 
</select> 

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots"> 

Si su <optgroup> tiene un ID que podría hacer de distancia con la función selectOptGroup y simplemente pase el grupo de opciones directamente al selectOptGroupOptions.

Answer 4

Estaba tratando de hacer algo similar en este momento.

Quería seleccionar <optgroup> 's <option> s al hacer clic en la etiqueta del grupo. El primer intento fue así:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

Esta solución funcionó medio ...

Al hacer clic en la etiqueta del <optgroup> 's todos sus hijos se convirtió seleccionado.

PERO cuando simplemente haciendo clic en un <option> todavía estaba seleccionando todos los demás <option> s en el grupo! El problema fue el burbujeo del evento, porque el <option> está dentro del <optgroup> técnicamente también está haciendo clic en él.

Por lo tanto, la última pieza del rompecabezas fue suprimir el evento burbujeando hacia arriba en el caso de que en realidad se hiciera clic en <option>. La solución final se convirtió en:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

$('select > optgroup > option').click(function (e) { 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
}); 

¡Hecho!

EDITAR

exasperante esto no funciona el trabajo en IE8 (y dudoso < IE8 - tal vez IE9) ...

Decide ignorar por completo los eventos de clic tanto en elementos como en elementos. La única alternativa que puedo pensar es colocar elementos encima de las etiquetas de grupo de opciones para capturar el clic, pero probablemente no valga la pena ...