Het maken van een vervolgkeuzelijst met aangepaste selectie is een van de meest voorkomende vereisten bij webontwikkeling. Met de vervolgkeuzelijst Selecteren kan de gebruiker een waarde kiezen uit een vooraf gedefinieerde lijst. Misschien vraag je je af:

“Waarom moet ik een custom select dropdown-component maken, als er al een HTML-selectietag is? Ik kan wat css-stijl toepassen en dat is het!”

Helaas is het dropdownmenu voor het selecteren van stijlen niet zo eenvoudig. Het native HTML-selectie-element staat ons niet toe om optietags te stylen.

Tegenwoordig verschijnen dropdownmenu’s in veel verschillende variaties. U kunt verschillende javascript-bibliotheken en css-frameworks vinden , die een eigen implementatie hebben voor aangepaste vervolgkeuzelijsten. Ze hebben bewezen cross-browserfunctionaliteit en zijn zeer betrouwbaar. Vaak hoeft u geen bibliotheken of frameworks te gebruiken, omdat in veel gevallen het maken van een aangepaste vervolgkeuzelijst een eenvoudige taak.

In deze blogpost wil ik met u delen, hoe u functionele keuzelijsten kunt bouwen zonder bibliotheken en frameworks te gebruiken. U kunt stijl toepassen om opties te selecteren en daar aangepaste componenten toevoegen.

Voordat u begint met het maken van een aangepaste vervolgkeuzelijst, moet u de volgende vragen:

Zal het keuzemenu honderden of duizenden opties bevatten?

Kunnen gebruikers meerdere opties selecteren?

In beide gevallen zou u een bibliotheek van derden, omdat eigen implementatie veel tijd kan kosten. Als u een vervolgkeuzelijst met honderden opties nodig heeft, moet u gebruikers een zoekfunctie bieden. Als het dropdownmenu duizenden opties heeft, moet u de “windowing” -techniek gebruiken. Voor meer informatie, ga naar Advanced Select Dropdown.

Custom Select Dropdown Voorbeeld

Hier ziet u het standaard geselecteerde element, dat kan er een beetje anders uitzien, afhankelijk van de browser die u gebruikt.

In deze tutorial zullen we het standaard geselecteerde element veranderen in:

De HTML

Traditioneel, als u een aangepaste vervolgkeuzelijst moet maken, zou u gebruik de volgende structuur.

Aangezien we de tag select niet kunnen gebruiken, hebben we meer opties om de html-structuur te kiezen . We kunnen ul en li elementen of div gebruiken met span -elementen. Laten we kiezen voor div en span structuur.

De CSS

Het is een goed idee om begin met een css-reset, waardoor inconsistenties in de browser worden verminderd. Ik heb gekozen voor Eric Meyer’s css-reset:

Bron: https://meyerweb.com/eric/tools/css/reset/

Ik geef de voorkeur met behulp van het box-model waarbij breedte = elementbreedte + opvulling + randen.

Eerst hebben we wat basisstijlen voor html-elementen toegevoegd. <div class=”custom-select”> positie is relatief, omdat we absolute positionering moeten toepassen voor de vervolgkeuzelijst.

De volgende css wordt gebruikt voor de vervolgkeuzepijl.

U kunt de overgang en transformatie van CSS3-eigenschappen zien. Overgang wordt gebruikt voor fade-in en fade-out van de vervolgkeuzelijst. Transformeren wordt gebruikt voor het animeren van een pijl, welke richting de vervolgkeuzelijst aangeeft.

Het JavaScript

U hoeft geen bibliotheken van derden te gebruiken voor dommanipulatie. Voor een eenvoudige vervolgkeuzelijst heeft u alleen elementaire javascript-gebeurtenissen nodig.

We hebben een klikfunctie aan de wrapper toegevoegd. De klikfunctie schakelt tussen klasse .open, die aangeeft of de optielijst wordt geopend of gesloten. Binnenklikfunctie zoeken we <div class=”custom-select”> door this.querySelector(".custom-select"). This binnenklikfunctie vertegenwoordigt geklikt element. We vragen niet het hele document door document.querySelector(".custom-select") voor het geval we meer vervolgkeuzemenu’s binnen DOM hebben.

In het bovenstaande JavaScript-fragment herhalen we alle opties en voegen we klikken toe functie, die de geselecteerde optie verandert door de klasse .selected toe te voegen. Nogmaals, de binnenklikfunctie wordt gevraagd binnen de aangeklikte optie (this in het fragment), voor het geval we gebeurtenishandlers willen wijzigen om meerdere vervolgkeuzemenu’s op één pagina te ondersteunen.

Het laatste fragment is optioneel en staat het sluiten van de vervolgkeuzelijst toe als de gebruiker uit de vervolgkeuzelijst klikt.

Meerdere geselecteerde vervolgkeuzelijsten op één pagina

Als we meerdere geselecteerde vervolgkeuzelijsten op één pagina willen gebruiken pagina, moeten we klikluisteraar aan alle .custom-select-wrapper -elementen koppelen en alle vervolgkeuzelijsten sluiten als de gebruiker uit een vervolgkeuzelijst klikt.

Geavanceerd vervolgkeuzemenu

Als u een vervolgkeuzelijst met honderden opties of meerdere opties nodig heeft, kunt u enkele van de beschikbare bibliotheken bekijken. In dit artikel kun je een vergelijking zien van de meest populaire bibliotheken.

In het geval dat je met duizenden opties te maken hebt, kun je geen DOM met duizenden optie-elementen renderen.Als u geen back-end kunt gebruiken, moet u de “windowing” -techniek gebruiken.

Wat is de “windowing” -techniek?

In plaats van duizenden elementen uit een lijst op ooit richt “windowing” of virtualisatie zich op het weergeven van alleen items die zichtbaar zijn voor de gebruiker. Je kunt deze Brian David Vaughn-lezing bekijken over het implementeren van de “windowing” -techniek, die gemakkelijk te implementeren is en enorme prestatiewinst kan opleveren.

Conclusie

Ik hoop dat dit blogbericht je helpt bij het bouwen van een aangepaste vervolgkeuzelijst. In eerste instantie moet u weten of de vervolgkeuzelijst selecteren veel opties bevat of dat gebruikers meerdere opties kunnen selecteren. Als u een basisselectiecomponent nodig heeft, beschrijft de blogpost de hele implementatie in HTML, CSS en JavaScript. Je kunt de broncode op Github controleren.