Listrutningsval i HTML är några av de mest naturligtvis användarvänliga artiklarna. Styling dem är en smärta och med deras basfunktion är de inte särskilt användbara om du inte har en begränsad mängd föremål med en begränsad mängd behov.
Det är där Chosen kommer in. Det är ett javascript-bibliotek som gör dropdown-upplevelsen mycket snyggare och mycket trevligare ur ett funktionsperspektiv.
Ovan kan du se standardvalt funktionalitet. Det ser bra ut och har som standard en enkel sökmekanism för att filtrera igenom resultat i fall du har en stor mängd objekt i rullgardinsmenyn. Först inkludera javascript och css-filer. Initiera dem sedan med koden nedan.
Det är lika enkelt som det. Låt oss nu ta det till nästa nivå, vad händer om du ville kunna ändra dropdowns funktionalitet för att möjliggöra flera val? Sök efter “Red” nedan, tryck sedan på enter, sök efter “Blue” och tryck sedan på enter. Nu kan du ta bort dem lika lätt från ditt val genom att bara slå X eller backspace två gånger.
Allt du behöver göra är att passera alternativmultipeln i samtalet till väljaren enligt nedan. Det finns ingen förändring i javascript, det initialiseras på samma sätt.