Die Verwendung von Dropdowns auf unserer Webseite verbessert die Gesamtqualität und das Design auf dem Bildschirm.
Ein Dropdown funktioniert also als Alternative und in bestimmten Fällen als bessere Option im Vergleich zu Radiobuttons und Checkboxen. Moment, was? Haben wir gesagt, eine Alternative zu Optionsfeldern und Kontrollkästchen? Aber es sollte doch nur der Radiobutton sein, nicht wahr?
Ein Radiobutton lässt nur eine Auswahl zu, ein Kontrollkästchen hingegen erlaubt eine oder mehrere Auswahlen. Ein Benutzer kann nur eine Option aus einer Dropdown-Liste auswählen und daher ähnelt sie in ihrer Funktionalität nur dem Radio-Button und nicht den Checkboxen, richtig? Nun, hier kommt das Konzept der Mehrfachauswahl in einem Auswahlfeld ins Spiel.
Wie kann ich dem Benutzer erlauben, mehrere Optionen aus einem Auswahlfeld auszuwählen?
Aus der Sicht eines Webdesigners ist es ziemlich einfach und unkompliziert, dem Benutzer zu erlauben, mehrere Optionen aus einem Auswahlfeld auszuwählen. Wir müssen nur das Attribut „multiple“ zum <select> Element hinzufügen. Um mehrere Optionen auswählen zu können, müssen Sie dem select-Element auch ein size-Attribut hinzufügen. Dadurch sieht das Auswahlfeld wie eine Box aus und nicht nur wie ein Dropdown-Feld.
Der Benutzer muss die Strg-Taste (in Windows) und die Befehlstaste (auf Mac) gedrückt halten, um die Optionen auszuwählen.
<select name="Country" multiple size="5"> <option value="USA">USA</option> <option value="Russia">Russia</option> <option value="India">India</option> <option value="Britain">Britain</option></select>Diese Punkte beachten
-
Das Attribut „multiple“ ist ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass mehrere Optionen ausgewählt werden können.
-
Aus der Sicht eines Web-Designers unterscheidet sich der HTML-Code für die Einfachauswahl und die Mehrfachauswahl aus einem Dropdown-Feld ein wenig; aus der Sicht des Endbenutzers ist dieser Unterschied auf der Webseite jedoch nicht sichtbar. Das Auswahlfeld würde in beiden Fällen weder sein Layout noch sein Styling ändern. Daher muss dem Benutzer mitgeteilt werden, wie er mehrere Optionen aus dem Feld auswählen kann.
-
Aufgrund des oben genannten Punktes ist es besser, Kontrollkästchen gegenüber Mehrfachauswahlen zu wählen, wenn die Anzahl der Auswahlmöglichkeiten geringer ist.
-
Die Art und Weise, wie mehrere Optionen aus einem Dropdown-Feld ausgewählt werden, unterscheidet sich von einem Betriebssystem zum anderen. Während unter Windows die Steuerungstaste (Strg) für die Auswahl verwendet wird, übernimmt unter Mac-Systemen die Befehlstaste diese Aufgabe.
Erweiterung des Dropdowns
Wie Sie sehen, ist die native HTML-Auswahlbox ziemlich eingeschränkt, insbesondere bei der Auswahl mehrerer Optionen. Hier kommen JavaScript und die hocheffektiven Bibliotheken ins Spiel. Die select2 jQuery-Komponente gibt dem Designer die Möglichkeit, das Gesamtlayout der Select-Box anzupassen und gleichzeitig nützliche Optionen wie Suche, dynamisches Laden, Tagging usw. zu integrieren.
Unterstützt select2 Mehrfachauswahlen?
Select2 unterstützt Mehrfachauswahlen in Dropdown-Listen. Um die Mehrfachauswahl zu aktivieren, muss nur das Attribut „multiple“ hinzugefügt werden.
Der Vorteil ist, dass der Benutzer nicht die Strg- oder Befehlstaste drücken muss, um mehrere Optionen auszuwählen.
<script>$(function(){ $(".js-example-basic-multiple").select2();});</script><select class="js-example-basic-multiple" multiple="multiple"> <option value="US">United States</option> <option value="IND">India</option> <option value="GBR">Great Britain</option></select>Select2 bietet auch andere Verbesserungen. Um zum Beispiel die Anzahl der Auswahlmöglichkeiten für den Benutzer zu begrenzen, fügen Sie einfach maximumSelectionLength in den Select2-Optionen wie folgt hinzu:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Lesen Sie mehr über Select2 in der Dokumentation