Dropdown velger i HTML er noen av de mest nativt ubrukelige elementene. Styling dem er en smerte, og ved deres grunnleggende funksjonalitet er de ikke veldig nyttige, med mindre du har begrenset mengde elementer med et begrenset antall behov.
Det er der Chosen kommer inn. Det er et javascriptbibliotek som gjør dropdown-opplevelsen mye hyggeligere, så vel som mye bedre fra et funksjonsperspektiv også.
Velg ... RedPurpleBlueYellowGreenBlackWhite
Over kan du se standardvalgt funksjonalitet. Det ser bra ut, og som standard har en enkel søkemekanisme for å filtrere gjennom resultater dersom du har en stor mengde elementer i rullegardinmenyen. Først, ta med javascript og css-filene. Deretter skal du initialisere dem med koden nedenfor.
$ (dokument) .ready (funksjon () {$ ("valgt"). valgt ();}); Det er like enkelt som det. La oss nå ta det til neste nivå, hva om du ønsket å kunne endre funksjonaliteten i rullegardinmenyen for å tillate flere valg? Søk etter "Rød" under, og trykk deretter Enter, søk etter "Blå", og trykk deretter Enter. Nå kan du fjerne dem like enkelt fra valget ditt ved å bare trykke på X eller backspace to ganger.
Velg ... RedPurpleBlueYellowGreenBlackWhite
Alt du trenger å gjøre er å passere alternativet flere i samtalen av valget som nedenfor. Det er ingen endring i javascript, det blir initialisert på samme måte.
Ta en titt på demoen nedenfor, eller du kan laste ned eksemplene i en zip.
