Skapa anpassad rullgardinsmeny för val är ett av de vanligaste kraven för webbutveckling. Välj rullgardinsmeny tillåter användaren att välja ett värde från en fördefinierad lista. Du kanske undrar:

”Varför behöver jag skapa en anpassad dropdown-komponent om det redan finns HTML-tagg? Jag kan tillämpa lite css-styling och det är det!”

Tyvärr är rullgardinsmenyn för styling inte så enkel. Inbyggt HTML-valelement tillåter oss inte stylingalternativstaggar.

Numera visas vissa rullgardinsmenyer i många olika varianter. Du kan hitta olika javascript-bibliotek och css-ramar , som har egen implementering för anpassade valda rullgardiner. De har beprövad webbläsarfunktionalitet och är mycket tillförlitliga. Många gånger behöver du inte använda några bibliotek eller ramar, för i många fall är det enkelt att skapa en anpassad rullgardinsmeny uppgift.

I det här blogginlägget vill jag dela med dig om hur du kan skapa funktionell rullgardinsmeny utan att använda några bibliotek och ramar. Du kan använda styling för att välja alternativ och lägga till anpassade komponenter där.

Innan du börjar skapa rullgardinsmeny för anpassad markering bör du fråga följande frågor:

Kommer vissa rullgardinsmenyer att ha hundratals eller tusentals alternativ?

Kan användare välja flera alternativ?

I båda fallen måste du använda en tredjepartsbibliotek, eftersom egen implementering kan ta mycket tid. Om du behöver en rullgardinsmeny med hundratals alternativ bör du ge användarna en sökfunktion. Om rullgardinsmenyn har tusentals alternativ bör du använda ”fönster” -teknik. Mer information finns i Avancerat Välj rullgardinsmeny.

Anpassat Välj rullgardinsexempel

Här kan du se standardvalelement, som kan se lite annorlunda ut beroende på vilken webbläsare du använder.

I den här guiden kommer vi att förvandla standardvalelementet till detta:

HTML

Traditionellt, när du behöver skapa en anpassad rullgardinsmeny, skulle du använd följande struktur.

Eftersom vi inte kan använda select -taggen har vi fler alternativ för att välja html-struktur . Vi kan använda ul och li -element eller div med span -element. Låt oss välja div och span -struktur.

CSS

Det är en bra idé att börja med en css-återställning, vilket minskar webbläsarens inkonsekvenser. Jag valde Eric Meyers css-återställning:

Källa: https://meyerweb.com/eric/tools/css/reset/

Jag föredrar med hjälp av boxmodellen där bredd = elementbredd + stoppning + gränser.

Först lade vi till lite grundläggande styling för html-element. <div class=”custom-select”> positionen är relativ, eftersom vi måste använda absolut positionering för rullgardinslistan.

Nästa css används för rullgardinspilen.

Du kan se CSS3-egenskaper övergå och omvandla. Övergång används för att tona ut och tona ut rullgardinsmenyn. Transform används för att animera pilen, vilken riktning representerar rullgardinsläget.

JavaScript

Du behöver inte använda tredjepartsbibliotek för dommanipulation. För enkel rullgardinsmeny behöver du bara grundläggande javascript-händelser.

Vi lade till klickfunktionen i omslaget. Klickafunktion växlar klass .open, vilket representerar om alternativlistan öppnas eller stängs. Inuti klickfunktionen söker vi <div class=”custom-select”> efter this.querySelector(".custom-select"). This inuti klickfunktionen representerar klickat element. Vi frågar inte hela dokumentet av document.querySelector(".custom-select") om vi har fler rullgardinsmenyer i DOM.

I javascript-utdraget ovan, itererar vi över alla alternativ och lägger till klick funktion, som ändrar det valda alternativet genom att lägga till .selected klass. Återigen frågar vi inifrån klickfunktionen inom det klickade alternativet (this i kodavsnittet), om vi vill ändra händelsehanterare för att stödja flera rullgardinsmenyer på en sida.

Det sista utdraget är valfritt och gör det möjligt att stänga rullgardinslistan om användaren klickar ur rullgardinsmenyn.

Flera valda rullgardinsmenyer på en sida

Om vi vill använda flera valda rullgardinsmenyer på en sida måste vi bifoga klicklyssnare till alla .custom-select-wrapper -element och stänga alla rullgardinsmeny om användaren klickar ur en rullgardinsmeny.

Avancerat Välj rullgardinsmeny

Om du behöver en rullgardinsmeny med hundratals alternativ eller flera val kan du kontrollera några av de tillgängliga biblioteken. I den här artikeln kan du se en jämförelse av de mest populära biblioteken.

Om du behöver hantera tusentals alternativ kan du inte göra en DOM med tusentals alternativelement.Om du inte kan använda någon backend måste du använda ”windowing” -teknik.

Vad är ”windowing” -teknik?

I stället för att återge tusentals element från en lista på en gång fokuserar ”fönster” eller virtualisering på att bara göra objekt som är synliga för användaren. Du kan kontrollera detta Brian David Vaughn-tal om implementering av ”fönster” -teknik, som är lätt att implementera och kan ge stora prestationsvinster. >

Slutsats

Jag hoppas att det här blogginlägget hjälper dig att bygga anpassad välj rullgardinsmeny. Först måste du veta om rullgardinsmenyn innehåller många alternativ eller om användarna kan välja flera alternativ. Om du behöver en grundläggande väljkomponent, beskriver blogginlägget hela implementeringen i HTML, CSS och JavaScript. Du kan kontrollera källkoden på Github.