Tengo un menú desplegable de selección con muchas opciones, y deben agruparse, porque les doy a cada <optgroup>
una clase y los configuro a display:none
, de modo que cuando selecciono algo en otro menú desplegable de selección para ellos para hacerse visible. Mi problema es que parece que TENGO que usar una etiqueta, y realmente no quiero una etiqueta. Mi lista de opciones será tan larga que insertar un clase dentro de cada opción será un problema, especialmente si uso Jquery para manipularlas. ¿Cómo puedo agruparlos en su lugar? Simplemente no puedo encontrar una solución en ningún lado.
Ejemplo HTML:
<select>
<option>Select something</option>
<optgroup class="default" label="defaultLabelNotwanted">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</optgroup>
<optgroup class="one" style="display:none" label="firstLabelNotWanted">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
<option>Option6</option>
</optgroup>
<optgroup class="two" style="display:none" label="secondLabelNotWanted">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
<option>Option1</option>
<option>Option6</option>
</optgroup>
<optgroup class="three" style="display:none" label="thirdLabelNotWanted">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
<option>Option6</option>
<option>Option7</option>
</optgroup>
<optgroup class="four" style="display:none" label="fourthLabelNotWanted">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
<option>Option6</option>
</optgroup>
3 respuestas
Las únicas etiquetas permitidas dentro de un <select>
son <option>
y <optgroup>
(https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element), así que no, no hay otro forma de agrupar sus opciones además de usar un optgroup.
Lo que puede hacer es mover la clase del optgroup a sus opciones, luego mover todas las opciones directamente debajo de select y finalmente eliminar los optgroups.
$(document).ready(function () {
const select = $('select');
select.find('option').each(function () {
select.append($(this).addClass($(this).parent().attr('class')));
});
select.find('optgroup').remove();
});
A continuación, puede ocultar las opciones según la clase:
select.find('.two').hide();
Jsfiddle: https://jsfiddle.net/ux2m6bhw/1/
¿Quieres ocultar solo la etiqueta? ¿Intentaste este código?
optgroup {
visibility: hidden;
}
optgroup option {
visibility: visible;
}
Si tiene control sobre cómo se generan su selección y sus opciones, otro enfoque similar a la respuesta anterior sería simplemente volcar todas las opciones en una selección (sin grupos) como se muestra a continuación
<select>
<option class="initialitem">Select something</option>
<option class="zero">Option1</option>
<option class="zero">Option2</option>
<option class="zero">Option3</option>
<option class="one">i Option1</option>
<option class="one">i Option2</option>
<option class="one">i Option3</option>
<option class="one">i Option4</option>
<option class="one">i Option5</option>
<option class="one">i Option6</option>
<option class="two">ii Option1</option>
<option class="two">ii Option2</option>
<option class="two">ii Option3</option>
<option class="two">ii Option4</option>
<option class="two">ii Option5</option>
<option class="two">ii Option1</option>
<option class="two">ii Option6</option>
<option class="three">iii Option1</option>
<option class="three">iii Option2</option>
<option class="three">iii Option3</option>
<option class="three">iii Option4</option>
<option class="three">iii Option5</option>
<option class="three">iii Option6</option>
<option class="three">iii Option7</option>
<option class="four">Option1</option>
<option class="four">Option2</option>
<option class="four">Option3</option>
<option class="four">Option4</option>
<option class="four">Option5</option>
<option class="four">Option6</option>
</select>
Luego, con JQuery puede ocultar todas las opciones con la siguiente declaración
$('select').find('option').hide();
Luego, para mostrar solo un conjunto, haga lo siguiente
$('select').find('.three').show();
$('select').find('.initialitem').show();
Lo anterior solo mostraría opciones que tienen la clase de three
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].