Dropdown-Auswahl in HTML sind einige der am häufigsten nicht benutzerfreundlichen Elemente. Sie zu stylen ist eine Qual und bei ihrer grundlegenden Funktionalität sind sie nicht sehr nützlich, es sei denn, Sie haben eine begrenzte Anzahl von Artikeln mit einem begrenzten Bedarf.
Das ist, wo Chosen hereinkommt. Es ist eine Javascript-Bibliothek, die das Dropdown-Erlebnis viel schöner macht, und auch aus Funktionalitätsperspektive viel schöner.
Auswählen ... RedPurpleBlueYellowGreenBlackWhite
Oben können Sie die ausgewählte Standardfunktion sehen. Es sieht gut aus und hat standardmäßig einen einfachen Suchmechanismus, um Ergebnisse zu filtern, falls Sie eine große Anzahl von Elementen in Ihrem Dropdown haben. Enthalten Sie zuerst die Javascript- und CSS-Dateien. Initialisieren Sie sie dann mit dem unten stehenden Code.
$ (Dokument) .ready (function () {$ (". selected"). selected ();}); So einfach ist das. Kommen wir nun zur nächsten Ebene. Was wäre, wenn Sie die Funktionalität des Dropdown-Menüs ändern möchten, um mehrere Auswahlen zu ermöglichen? Suchen Sie unten nach "Rot", drücken Sie Enter, suchen Sie nach "Blau" und drücken Sie Enter. Jetzt können Sie sie genauso einfach aus Ihrer Auswahl entfernen, indem Sie einfach zweimal auf das X oder die Rücktaste drücken.
Auswählen ... RedPurpleBlueYellowGreenBlackWhite
Alles, was Sie tun müssen, ist, die Option multiple im Aufruf der Auswahl wie folgt zu übergeben. Es gibt keine Änderung am Javascript, es wird genau so initialisiert.
Schau dir die Demo unten an oder du kannst die Beispiele in einem Zip herunterladen.
