Auswählbare OptGroup mit select2

Dies ist möglich, wenn Sie Select2 mit einem versteckten Eingabeelement - anstelle eines Auswahlelements - unterstützen.

Um eine Gruppenoption auswählbar zu machen, müssen Sie ihr eine "ID" geben, aber es scheint, dass es eine leere Zeichenfolge sein kann. Sie können dann das Ereignis "select2-selecting" verwenden, um zu verhindern, dass die Gruppenoption ausgewählt wird, und stattdessen die untergeordneten Optionen ausgewählt werden.

Zusätzlich kann eine Funktion query bereitgestellt werden, um zu verhindern, dass eine Gruppenoption in der Liste angezeigt wird, nachdem alle untergeordneten Optionen ausgewählt wurden.

Wenn Sie Optionen wie folgt definiert haben:

Sie können Ihr Select2 wie folgt instrumentieren:

jsfiddle

Hier ist jsfiddle ohne die Funktion query , wobei die Gruppenoptionen immer noch angezeigt werden, wenn alle untergeordneten Optionen verfügbar sind ausgewählt.

Ich habe Johns Code benutzt, aber mein Problem war, dass ich die Fähigkeit zum Filtern brauchte, also fügte ich es hinzu. Sie können den Code auf jsfiddle sehen.

Dies ist der Abfragecode:

Gib zuerst deine ID an zum Beispiel

<select style="width: 95%" id="selectgroup">

und fügen Sie dann Klasse zu Ihrer optgroup wie

und fügen Sie dann dieses

Wenn Sie auf optgroup klicken, werden alle Optionen unter optgroup ausgewählt.

In Select2 v4 habe ich festgestellt, dass die Antwort von John S nicht funktioniert ( hier ). Ich lade meine Daten als Array mit AJAX und erstellt eine Umgehung:

Ich gruppiere meine Artikel nach Ort, und jede Option enthält den Namen des Ortes irgendwo in seinem HTML. Jedes Mal, wenn ein optgroup-Header angeklickt wird, erhalte ich die Position (der Name wird in der Dropdown-Liste angezeigt). Dann schaue ich mir alle Optionen in der # select2-Tabelle an und finde heraus, welche diese in ihrem HTML enthalten.

Ich weiß, dass dies ein hacky Workaround ist, aber hoffentlich hilft es / zeigt in die richtige Richtung.

John S, bereitgestelltes Beispiel funktioniert in den meisten Fällen sehr gut (für V3). Es hat jedoch einen Fehler:

Angenommen, die Auswahlliste ist lang genug, um scroll zu haben. Wenn Sie ein beliebiges Element in einer Gruppe auswählen, das nur verfügbar ist, nachdem Sie nach unten geblättert haben, können Sie das nächste Element nicht mehr nach dem auswählen, das Sie aus dieser Gruppe ausgewählt haben. Dies liegt daran, dass sich die Methode ensureHighlightVisible von select2 fehlerhaft verhält, da die Selektoren, die sie verwendet, Annahmen verwenden, die Gruppen immer "nicht auswählbar" sind. Die Schriftrolle springt also jedes Mal, wenn Sie versuchen, das Objekt auszuwählen.

Also, obwohl diese Lösung wirklich gut aussieht, habe ich sie gelöscht und sie ohne Gruppen-IDs neu implementiert:

und

Nun, ich bin auf dieses Problem gestoßen und habe festgestellt, dass jedes Mal, wenn select2 (Select2 4.0.5) geöffnet wird, ein span-Element vor dem schließenden body-Element hinzugefügt wird. Innerhalb des span-Elements wird außerdem eine ul mit den id: select2-X-Ergebnissen hinzugefügt, wobei X die select2-ID ist. Daher habe ich die folgende Problemumgehung gefunden ( jsfiddle ):