Emboîtement de groupes d'options dans une liste déroulante/sélection

Question

J'ai créé un client c# DropDownList contrôle qui peut rendre son contenu sont optgroups (pas à partir de zéro, j'ai édité un certain code trouvé sur l'Internet, bien que je comprends exactement ce qu'il fait), et il fonctionne bien.

Cependant, je me suis retrouvé dans une situation où j'ai besoin de deux niveaux d'indentation dans ma liste déroulante, à savoir

<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>

Cependant, dans l'exemple ci-dessus, il est rendu comme si Level Two était à la même quantité d'indentation que Level One .

Existe-t-il un moyen de produire le comportement des optgroups imbriqués que je recherche ?

Answer 1

La spécification HTML ici est vraiment cassée. Elle devrait autoriser les groupes d'options imbriqués et recommander aux agents utilisateurs de les rendre comme des menus imbriqués. Au lieu de cela, un seul niveau d'optgroup est autorisé . Cependant, ils doivent dire ce qui suit à ce sujet :

Note. Les responsables de la mise en œuvre sont informés que les futures versions de HTML pourront étendre le mécanisme de regroupement pour permettre l'imbrication des groupes (c'est-à-dire que les éléments OPTGROUP pourront s'imbriquer). Cela permettra aux auteurs de représenter une hiérarchie de choix plus riche.

Et les agents utilisateurs pourraient commencer à utiliser les sous-menus pour rendre les groupes d'options au lieu d'afficher les titres avant le premier élément d'option dans un groupe d'options comme ils le font actuellement.

Answer 2

C'est très bien, mais si vous ajoutez une option qui n'est pas dans optgroup, cela devient un bug.

<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>

Ce serait beaucoup mieux si vous utilisiez le css et fermiez optgroup tout de suite :

<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>

Answer 3

Ok, si jamais quelqu'un lit ceci : la meilleure option est d'ajouter quatre   à chaque niveau supplémentaire d'indentation, il semblerait !

donc :

<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>

Answer 4

Je pense que si vous avez quelque chose d'aussi structuré et complexe, vous pourriez envisager autre chose qu'une simple boîte déroulante.

Answer 5

Je sais que cela remonte à un certain temps, mais j'ai un petit plus à ajouter :

Cela n'est pas possible dans HTML5 ou dans toute autre spécification précédente, et n'est pas encore proposé dans HTML5.1. J'ai fait une demande auprès du public-html-comments liste de diffusion, mais nous verrons si quelque chose en ressort.

Néanmoins, bien que cela ne soit pas possible en utilisant <select> Pourtant, vous pouvez obtenir un effet similaire avec le HTML suivant, plus quelques CSS pour la beauté :

<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>

Comme avantage supplémentaire, cela signifie également que vous pouvez permettre la sélection de la <optgroups> eux-mêmes. Cela peut s'avérer utile si vous avez, par exemple, des catégories imbriquées où les catégories sont très détaillées et que vous souhaitez permettre aux utilisateurs de sélectionner un niveau supérieur dans la hiérarchie.

Tout cela fonctionnera sans JavaScript, mais vous pourriez souhaiter en ajouter pour masquer les boutons radio et modifier la couleur de fond de l'élément sélectionné, par exemple.

Gardez à l'esprit que cette solution est loin d'être parfaite, mais si vous avez absolument besoin d'une sélection imbriquée avec une compatibilité raisonnable avec les navigateurs, c'est probablement ce que vous obtiendrez de mieux.