Anonim

Dropdown-markeringer i HTML er nogle af de mest naturligt ikke-brugervenlige emner. At style dem er en smerte, og ved deres basefunktion er de ikke særlig nyttige, medmindre du har en begrænset mængde genstande med et begrænset antal behov.

Det er her, Chosen kommer ind. Det er et javascript-bibliotek, der gør dropdown-oplevelsen meget pænere ud, såvel som meget pænere fra et funktionalitetsperspektiv.

Over kan du se standard valgt funktionalitet. Det ser godt ud, og har som standard en simpel søgemekanisme til at filtrere gennem resultaterne, i tilfælde af at du har en stor mængde varer i din dropdown. Først skal du medtage javascript og css-filer. Initialiser dem derefter med koden herunder.

Det er så let som det. Lad os nu tage det til næste niveau, hvad hvis du ville være i stand til at ændre funktionaliteten i dropdown for at give mulighed for flere valg? Søg efter "Rød" nedenfor, tryk derefter på Enter, søg efter "Blå", og tryk derefter på Enter. Nu kan du fjerne dem lige så let fra dit valg ved blot at slå X eller backspace to gange.


Alt hvad du skal gøre er at videregive indstillingsmultiplikatet i opkaldet til vælgeren som nedenfor. Der er ingen ændring af javascript, det initialiseres nøjagtigt på samme måde.