Hvordan lage en rullegardinmeny med JavaScript

JavaScript legger til dynamisk oppførsel til nettstedet ditt, du kan lage forskjellige rullegardinmenyer, navigasjonsstenger, animasjoner og håndtere hvordan siden reagerer på hvert klikk. Dette gjør websiden interaktiv og legger til "Life" til et nettsted.

Mange utviklere er avhengige av Bootstrap for disse formålene, da det kommer med innebygde komponenter som enkelt kan brukes på nytt og øke produktiviteten til en utvikler, men å forstå hvordan hver ting fungerer på egen hånd er viktig før de hopper til å bruke gjenbrukbare komponenter. Her i denne artikkelen vil vi diskutere hvordan du lager en nedtrekksmenyen Bruke JavaScript.

Rullegardinmeny med JavaScript

Vi har alle sett rullegardinmenyer og brukt dem mens vi fylte forskjellige online skjemaer for å velge en bestemt by, stat eller bare velge fra en haug med rullegardinmuligheter gitt oss.

Dette er vekslende menyer som består av flere alternativer som brukeren kan velge et bestemt alternativ. Disse alternativene kan enten defineres i HTML -listen eller i JavaScript som en matrise, og de er tilknyttet en funksjon. Hver gang en bruker klikker på et alternativ, utløses funksjonen og en tilsvarende handling oppstår.

Viktige punkter for å lage en rullegardinmeny

Du kan opprette en enkel rullegardinmeny med bruk av en HTML -liste som bruker Tag sammen med stikkord. En ID er gitt til listen som brukes i JavaScript for å få alternativet valgt av brukeren.

Du kan opprette en mer kompleks rullegardinmeny ved å bruke hovedsakelig JavaScript med litt HTML. Alternativene vil bli definert som en matrise i JavaScript.

La oss forstå hver av disse bedre med koden for bedre forståelse.

Enkel rullegardinmeny

Først må du opprette en liste i HTML som gir den noen ID i en skjemakode, her gir vi den "alternativet" som en ID.

Alternativer er definert i hver tag, og på endring kalles en funksjon.

Funksjonen er definert i JavaScript med navnet “DropdownMenu ()” som utløser når alternativet er valgt.

Siste ting er en inndata opprettes med ID “City” der alternativet vises valgt av brukeren.

Velg byen din fra listen

---Velg by---
New York
Amsterdam
Paris
London

Din utvalgte by er:

Produksjon:

Rullegardinmeny ved hjelp av div sammen med JavaScript

Lag først to div i HTML -taggen som utløser funksjonen og viser menyen på skjermen.

Definer listen som en matrise i JavaScript og bruk Documnet.CreateElement () -metode for å lage en rullegardinliste programmatisk i JavaScript

Ring deretter metoden vedlegg () for å legge til rullegardinmenyen på slutten av listen.

Vis listen

Produksjon:

Konklusjon

JavaScript brukes til å lage forskjellige interaktive elementer på nettsiden for å øke den dynamiske oppførselen til siden. I denne artikkelen opprettet vi en rullegardinmeny i JavaScript med koden. For det første ble en enkel rullegardinmeny opprettet ved hjelp av HTML og funksjon som ble kalt gjennom JavaScript, så gjorde vi den kompleks og opprettet rullegardinmenyen med JavaScript og en lil bit av HTML. Elementene ble definert som en matrise og en rullegardinmeny ble opprettet ved hjelp av innebygde metoder. Kode er gitt for både for bedre forståelse.