HTML cómo agrupar opciones en una selección sin usar la etiqueta <optgroup>

Question

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>

html select label option

1

Horcrux 10 may. 2019 a las 12:51

Answer 1

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/

0

thebjorn 10 may. 2019 a las 15:47

Answer 2

¿Quieres ocultar solo la etiqueta? ¿Intentaste este código?

optgroup {
  visibility: hidden;
}
optgroup option {
  visibility: visible;
}

0

KokHanz 10 may. 2019 a las 09:58

Answer 3

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

-1

Cris Maule 10 may. 2019 a las 16:10

HTML cómo agrupar opciones en una selección sin usar la etiqueta <optgroup>

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html