48 votos

Anidación optgroups en un dropdownlist/seleccionar

He creado un cliente de c# control DropDownList que puede hacer que los contenidos son optgroups (No desde cero, he editado el código encontrado en la internet, aunque yo no entiendo exactamente lo que está haciendo), y funciona bien.

Sin embargo, he llegado a través de una situación en la que necesito tener dos niveles de sangría en mi desplegable, es decir,

<select>
    <optgroup label="Level One">
     <option> A.1 </option>
     <optgroup label="Level Two">
      <option> A.B.1 </option>
     </optgroup>
     <option> A.2 </option>
    </optgroup>
</select>

Sin embargo, en la medida de como soy consciente de que esto se acaba de representar como normal optgroups.

Es allí una manera de producir esta anidado en el comportamiento?

50voto

Raphael Schweikert Puntos 6380

La especificación HTML aquí está realmente roto. Se debe permitir a los anidada optgroups y recomendar los agentes de usuario representarlos como menús anidados. En su lugar, sólo uno optgroup nivel está permitido. Sin embargo, no tienen que decir lo siguiente sobre el tema:

Nota. Los ejecutores se recomienda que las futuras versiones de HTML puede extender la agrupación mecanismo para permitir que los grupos anidados (es decir, OPTGROUP elementos de mayo de nido). Esto permitirá a los autores para representar una más ricos de la jerarquía de opciones.

Y los agentes de usuario puede comenzar a usar los submenús para representar optgoups en lugar de mostrar los títulos antes de la primera opción elemento optgroup como lo hacen ahora.

37voto

Adam Puntos 295

Esto está muy bien pero si se añade la opción de la bruja no es en optgroup se pone buggy.

<select>
       <optgroup label="Level One">
         <option> A.1 </option>
         <optgroup label="nbsp;nbsp;nbsp;nbsp;Level Two">
          <option>nbsp;nbsp;nbsp;nbsp; A.B.1 </option>
         </optgroup>
         <option> A.2 </option>
        </optgroup>

        <option> A </option>

</select>

Sería mucho mejor si usted utiliza css y cerca de optgroup de inmediato :

<select>
    <optgroup label="Level One"></optgroup>
     <option style="padding-left:15px"> A.1 </option>
     <optgroup label="Level Two" style="padding-left:15px"></optgroup>
      <option style="padding-left:30px"> A.B.1 </option>    
     <option style="padding-left:15px"> A.2 </option>
    <option> A </option>
</select>

28voto

Ed Woodcock Puntos 5170

Ok, si alguien alguna vez lee esto: la mejor opción es añadir cuatro &nbsp;s en cada nivel extra de la sangría, parece!

así:

<select>
 <optgroup label="Level One">
  <option> A.1 </option>
  <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">
   <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>
  </optgroup>
  <option> A.2 </option>
 </optgroup>
</select>

4voto

mgroves Puntos 8550

Creo que si tienes algo que estructurado y complejo, usted podría considerar la posibilidad de algo distinto de un único cuadro de lista desplegable.

2voto

James Billingham Puntos 348

Sé que esto fue hace bastante tiempo, sin embargo tengo un poco más para agregar:

Esto no es posible en HTML5 o cualquiera de las anteriores especificaciones, ni es propuesto en HTML5.1. sin embargo. He hecho una solicitud a la public-html-comments lista de correo, pero vamos a ver si algo se sale de ella.

Independientemente, aunque esto no es posible con el uso de <select> , sin embargo, usted puede conseguir un efecto similar con el siguiente código HTML, además de un poco de CSS para la belleza:

<ul>
    <li>
        <input type="radio" name="location" value="0" id="loc_0" />
        <label for="loc_0">United States</label>

        <ul>
            <li>
                Northeast

                <ul>
                    <li>
                        <input type="radio" name="location" value="1" id="loc_1" />
                        <label for="loc_1">New Hampshire</label>
                    </li>

                    <li>
                        <input type="radio" name="location" value="2" id="loc_2" />
                        <label for="loc_2">Vermont</label>
                    </li>

                    <li>
                        <input type="radio" name="location" value="3" id="loc_3" />
                        <label for="loc_3">Maine</label>
                    </li>
                </ul>
            </li>

            <li>
                Southeast

                <ul>
                    <li>
                        <input type="radio" name="location" value="4" id="loc_4" />
                        <label for="loc_4">Georgia</label>
                    </li>

                    <li>
                        <input type="radio" name="location" value="5" id="loc_5" />
                        <label for="loc_5">Alabama</label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>

    <li>
        <input type="radio" name="location" value="6" id="loc_6" />
        <label for="loc_6">Canada</label>

        <ul>
            <li>
                <input type="radio" name="location" value="7" id="loc_7" />
                <label for="loc_7">Ontario</label>
            </li>

            <li>
                <input type="radio" name="location" value="8" id="loc_8" />
                <label for="loc_8">Quebec</label>
            </li>

            <li>
                <input type="radio" name="location" value="9" id="loc_9" />
                <label for="loc_9">Manitoba</label>
            </li>
        </ul>
    </li>
</ul>

Como un beneficio agregado, esto también significa que usted puede permitir la selección de la <optgroups> sí mismos. Esto puede ser útil si, por ejemplo, categorías anidadas donde las categorías van a entrar en detalles pesados y desea permitir a los usuarios seleccionar más arriba en la jerarquía.

Esto va a funcionar sin JavaScript, sin embargo, usted podría añadir algunos para ocultar los botones de radio y, a continuación, cambie el color de fondo del elemento seleccionado o algo.

Tenga en cuenta, esto está lejos de ser una solución perfecta, pero si es absolutamente necesario un select anidado con razonable de la compatibilidad entre navegadores, esto es probablemente lo más cerca que va a obtener.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X