Anonim

Dropdown-Auswahl in HTML sind einige der am wenigsten benutzerfreundlichen Elemente. Sie zu stylen ist ein Schmerz und in ihrer Grundfunktionalität nicht sehr nützlich, es sei denn, Sie haben eine begrenzte Menge an Gegenständen mit einer begrenzten Menge an Bedürfnissen.

Hier kommt Chosen ins Spiel. Es handelt sich um eine Javascript-Bibliothek, mit der das Dropdown-Erlebnis viel schöner aussieht und die auch aus funktionaler Sicht viel schöner ist.

Oben sehen Sie die standardmäßig ausgewählte Funktionalität. Es sieht gut aus und verfügt standardmäßig über einen einfachen Suchmechanismus zum Filtern der Ergebnisse, falls sich eine große Anzahl von Elementen in Ihrer Dropdown-Liste befindet. Schließen Sie zuerst die Javascript- und CSS-Dateien ein. Initialisieren Sie sie dann mit dem folgenden Code.

So einfach ist das. Nun gehen wir zum nächsten Level über. Was wäre, wenn Sie die Funktionalität der Dropdown-Liste ändern möchten, um eine Mehrfachauswahl zu ermöglichen? Suchen Sie unten nach "Rot" und drücken Sie die Eingabetaste. Suchen Sie nach "Blau" und drücken Sie die Eingabetaste. Jetzt können Sie sie genauso einfach aus Ihrer Auswahl entfernen, indem Sie zweimal auf das X oder die Rücktaste drücken.


Alles was Sie tun müssen, ist die Option Multiple im Aufruf des Selects wie folgt zu übergeben. Es gibt keine Änderung am Javascript, es wird genauso initialisiert.