Dropdown vælger i HTML er nogle af de mest indbyggede, ubrugsvennlige elementer. Styling dem er en smerte, og ved deres base funktionalitet er de ikke meget nyttige, medmindre du har en begrænset mængde af varer med en begrænset mængde behov.
Det er, hvor Chosen kommer ind. Det er et javascriptbibliotek, der gør dropdown-oplevelsen meget pænere, og meget mere pæn ud fra et funktionalitetsperspektiv.
Vælg ... RedPurpleBlueYellowGreenBlackWhite
Ovenfor kan du se standard Valgte funktionalitet. Det ser godt ud og har som standard en simpel søgemekanisme til at filtrere gennem resultater, hvis du har en stor mængde elementer i din dropdown. Først skal du inkludere javascript og css-filer. Derefter skal du initialisere dem med koden nedenfor.
$ (dokument) .ready (funktion () {$ (".valgt") .valgt ();}); Det er så nemt som det. Lad os nu tage det til næste niveau, hvad nu hvis du ønskede at kunne ændre funktionaliteten i dropdownen for at give mulighed for flere valg? Søg efter "Rød" nedenfor, og tryk derefter på Enter, søg efter "Blå", og tryk derefter på Enter. Nu kan du fjerne dem lige så nemt fra dit valg ved blot at trykke X eller backspace to gange.
Vælg ... RedPurpleBlueYellowGreenBlackWhite
Alt du skal gøre er at videregive muligheden flere i opkaldet til vælg som nedenfor. Der er ingen ændring til javascript, det bliver initialiseret på samme måde.
Tjek demoen nedenfor eller du kan downloade eksemplerne i en lynlås.
