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?Forma fácil de seleccionar rápidamente un grupo de opciones completo en el cuadro de selección
Respuesta
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.
jQuery:
$('#myoptgroup option').attr('selected', true);
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
.
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 ...
- 1. Knockoutjs seleccionar con el grupo de opciones
- 2. Cambiar las opciones en el cuadro de selección según las diferentes opciones de selección
- 3. Cómo habilito/deshabilito opciones en Seleccionar cuadro usando jquery
- 4. una forma de saber si las opciones no encajan dentro de un seleccionar - en IE
- 5. jQuery - seleccione la opción en el cuadro de selección
- 6. ¿Cómo deseleccionar un elemento en un cuadro de selección?
- 7. jQuery eliminar opciones de seleccionar
- 8. Cómo seleccionar opciones no consecutivas de selección múltiple usando el teclado en IE
- 9. ¿Cómo puedo seleccionar un cuadro de imagen?
- 10. zf2 crear el cuadro de selección/desplegable y completar opciones en el controlador?
- 11. KnockoutJS - Valor de enlace de seleccionar con objetos de grupo de opciones y javascript
- 12. Instrucción MYSQL para seleccionar rápidamente un grupo de n: n tabla
- 13. Selección Cuadro de selección con jQuery
- 14. cómo crear un cuadro de selección múltiple con opciones fuera seleccionada CodeIgniter
- 15. Selección de cuadro/rectángulo en Google Maps
- 16. ¿Cómo puedo usar los datos JSON para rellenar las opciones de un cuadro de selección?
- 17. jQuery refrescar cuadro de selección
- 18. cómo seleccionar opciones en la lista de selección múltiple con jQuery?
- 19. Validar cuadro de selección
- 20. Escribir cuadro de selección
- 21. ¿Cómo se limitan las opciones seleccionadas en un cuadro de selección html?
- 22. Seleccionar elementos en un cuadro de lista usando C#
- 23. El cuadro de selección de verificación tiene ciertas opciones con Capybara
- 24. Seleccionar último elemento rápidamente después de un .split()
- 25. selección ListBoxItem de enfoque Cuadro de texto
- 26. ¿La forma más fácil de crear un cuadro de diálogo personalizado que devuelve un valor?
- 27. CSS Seleccionar estilo de flecha de cuadro
- 28. Pasar un paquete completo a un grupo de nieve
- 29. ¿Cuál es la forma más fácil de obtener el nombre completo de un usuario en un sistema Linux/POSIX?
- 30. Seleccionar estilo de flecha de cuadro
Hmm estaba tratando de encontrar una solución sin jQuery. Pero mirando la manera simple de hacerlo; y el otro lado: atravesando el dom .... Jquery es. – blub
@blub - Creo que mucha gente entra en jQuery de esa manera. ;-) –
Atravesar el DOM usted mismo no es terriblemente difícil, pero un marco simplemente lo hace más fácil. 'document.getElementById ('selectElementID')' te daría el elemento seleccionado. Entonces solo se trata de atravesar a sus hijos o puede agregar un detector de eventos para capturar el evento seleccionado y analizar si es su grupo deseado. Si es así, atravesaría los niños de optgroup y los seleccionaría también. –