Verschachtelte optgroups in einer Dropdownliste/select

Question

Ich habe ein benutzerdefiniertes c# DropDownList-Steuerelement erstellt, das seine Inhalte als optgroups rendern kann (Nicht von Grund auf neu, ich habe einige im Internet gefundenen Codes bearbeitet, obwohl ich genau verstehe, was es macht), und es funktioniert gut.

Allerdings bin ich nun auf eine Situation gestoßen, in der ich zwei Ebenen von Einrückungen in meinem Dropdown benötige, d.h.

     A.1 

       A.B.1 

     A.2 

Allerdings wird im obigen Beispiel-Snippet angezeigt, als wäre Ebene Zwei genauso eingerückt wie Ebene Eins.

Gibt es eine Möglichkeit, das verschachtelte optgroup-Verhalten zu erreichen, nach dem ich suche?

Answer 1

Die HTML-Spezifikation hier ist wirklich fehlerhaft. Sie sollte verschachtelte optgroups zulassen und empfehlen, dass Browser sie als verschachtelte Menüs rendern. Stattdessen ist nur eine optgroup-Ebene erlaubt. Allerdings müssen sie folgendes zum Thema sagen:

Hinweis. Entwickler werden darauf hingewiesen, dass zukünftige Versionen von HTML den Gruppierungsmechanismus erweitern können, um verschachtelte Gruppen zuzulassen (d. h. OPTGROUP-Elemente können verschachtelt werden). Dadurch können Autoren eine reichere Hierarchie von Auswahlmöglichkeiten darstellen.

Und Browser könnten anfangen, Untermenüs zu verwenden, um optgroups anstelle von Titeln vor dem ersten Options-Element in einer optgroup anzuzeigen, wie sie es jetzt tun.

Answer 2

Ok, wenn das jemand liest: Die beste Option ist es, vier s auf jeder zusätzlichen Einrückungsebene hinzuzufügen, scheint es!

so:

   A.1 

        A.B.1 

   A.2

Answer 3

Dies ist in Ordnung, aber wenn Sie eine Option hinzufügen, die nicht in der optgroup ist, wird es fehlerhaft.

Wäre viel besser, wenn Sie css verwenden und die optgroup sofort schließen:

   A.1 

   A.B.1 
   A.2 
   A

Answer 4

  .NestedSelect{display: inline-block; height: 100px; border: 1px Black solid; overflow-y: scroll;}
  .NestedSelect label{display: block; cursor: pointer;}
  .NestedSelect label:hover{background-color: #0092ff; color: White;}
  .NestedSelect input[type="radio"]{display: none;}
  .NestedSelect input[type="radio"] + span{display: block; padding-left: 0px; padding-right: 5px;}
  .NestedSelect input[type="radio"]:checked + span{background-color: Black; color: White;}
  .NestedSelect div{margin-left: 15px; border-left: 1px Black solid;}
  .NestedSelect label > span:before{content: '- ';}

  Frucht

    Apfel
    Banane
    Orange

  Getränk

    Wasser

    Weich

      Cola
      Limoflasche
      Limonade

    Hart

      Bär
      Whisky
      Wodka
      Gin

Answer 5

Ich mag wirklich die Lösung von Broken Arrow oben in diesem Beitrag. Ich habe es nur verbessert/verändert, so dass das, was als Labels bezeichnet wurde, umgeschaltet werden kann und nicht als Optionen betrachtet wird. Ich habe ein kleines Stück jQuery verwendet, aber das könnte auch ohne jQuery erfolgen.

Ich habe Zwischenlabels (keine Blattlabels) durch Links ersetzt, die beim Klicken eine Funktion aufrufen. Diese Funktion ist dafür zuständig, das nächste div des angeklickten Links umzuschalten, sodass es die Optionen erweitert/zusammenklappt. Dies vermeidet die Möglichkeit, ein Zwischenelement in der Hierarchie auszuwählen, was normalerweise erwünscht ist. Eine Variante, die es ermöglicht, Zwischenelemente auszuwählen, sollte einfach sein.

Das ist das modifizierte HTML:

    Frucht

            Apfel

            Banane

            Orange

    Getränk

            Wasser

        Soft

                Cola

                Soda

                Zitronenlimonade

        Hart

                Bier

                Whisky

                Wodka

                Gin

Ein kleines JavaScript/jQuery Funktion:

function toggleDiv(element) {
    $(element).next('div').toggle('medium');
}

Und das CSS:

.NestedSelect {
    display: inline-block;
    height: 100%;
    border: 1px Black solid;
    overflow-y: scroll;
}

.NestedSelect a:hover, .NestedSelect span:hover  {
    background-color: #0092ff;
    color: White;
    cursor: pointer;
}

.NestedSelect input[type="radio"] {
    display: none;
}

.NestedSelect input[type="radio"] + span {
    display: block;
    padding-left: 0px;
    padding-right: 5px;
}

.NestedSelect input[type="radio"]:checked + span {
    background-color: Black;
    color: White;
}

.NestedSelect div {
    display: none;
    margin-left: 15px;
    border-left: 1px black
    solid;
}

.NestedSelect label > span:before, .NestedSelect a:before{
    content: '- ';
}

.NestedSelect a {
    display: block;
}

Laufendes Beispiel in JSFiddle