Dropdown selects in HTML zijn enkele van de meest van nature niet gebruiksvriendelijke items. Het is pijnlijk om ze te stylen en met hun basisfunctionaliteit zijn ze niet erg handig, tenzij je een beperkt aantal items hebt met een beperkt aantal behoeften.
Dat is waar Chosen binnenkomt. Het is een javascript-bibliotheek die de dropdown-ervaring veel leuker maakt, maar ook veel leuker vanuit een functionaliteitsperspectief.
Selecteer ... RedPurpleBlueYellowGreenBlackWhite
Hierboven ziet u de standaard gekozen functionaliteit. Het ziet er geweldig uit, en heeft standaard een eenvoudig zoekmechanisme om resultaten te filteren voor het geval je een groot aantal items in je dropdown hebt staan. Voeg eerst de javascript- en css-bestanden toe. Start ze vervolgens met de onderstaande code.
$ (document) .ready (function () {$ (". selected"). selected ();}); Het is zo eenvoudig als dat. Laten we het nu naar het volgende niveau brengen, wat als u de functionaliteit van de vervolgkeuzelijst wilt kunnen wijzigen om meerdere selecties toe te staan? Zoek hieronder naar "Rood" en druk op Enter, zoek naar "Blauw" en druk op Enter. Nu kunt u ze net zo gemakkelijk uit uw selectie verwijderen door tweemaal op de X- of Backspace-toets te drukken.
Selecteer ... RedPurpleBlueYellowGreenBlackWhite
Het enige wat u hoeft te doen is de optie multiple doorgeven in de aanroep van de selectie zoals hieronder. Het javascript verandert niet, het wordt op exact dezelfde manier geïnitialiseerd.
Bekijk de demo hieronder of download de voorbeelden in een zip.
