Hvordan lage en rullegardinliste ved hjelp av JavaScript?

HTML og CSS brukes til å lage fantastiske websider, men når JavaScript brukes i kombinasjon, er resultatet absolutt fantastisk. En veldig kul ting med en webside er rullegardinlistene. Nå er det mange rammer tilgjengelig på Internett som lar brukeren bruke forhåndsbygde rullegardinlister, men å vite det grunnleggende er viktig. Denne artikkelen vil demonstrere hvordan du oppretter en grunnleggende rullegardinliste ved hjelp av HTML, CSS og JavaScript.

Trinn 1: Sett opp HTML -dokumentet

Begynn med å lage et HTML -dokument og legge følgende linjer i HTML -filen:

Velg bilmake


Porsche
Mercedes
BMW
Audi
Bugatti

La oss forklare hva som skjer her:

• En forelder er opprettet med iD = “DDSection”, Senere vil denne diven bli brukt til å samkjøre barnelementene på linje med det
• Det opprettes en knapp som kaller Knappklikket () metode ved klikk. Denne knappen vil bli brukt til å vise rullegardinlisten.
• Etter det opprettes en annen div med ID "Carmakes", som skal lagre en haug med alternativer inni den. Denne diven vil fungere som en beholder for Tagger plassert inne i den.

Å kjøre HTML -dokumentet gir følgende utdata til nettleseren:

Ettersom det er synlig i utdataene, er ikke elementene i rullegardinlisten på riktig sted. De burde være:

• Skjult til knappen er klikket
• Vertikalt inline med knappen siden det er en "rullegardin" -liste

Så la oss fikse det i neste trinn

Trinn 2: Fiksing av rullegardinlistenes elementer med CSS

For å starte, sett foreldrene Div's (hvis ID er ddseksjon) visningseiendom til “Inline-block”, Sett også sin posisjon til "slektning":

#DDSection
Posisjon: relativ;
Display: Inline-block;

Etter det, legg til litt styling i knappen:

#Button
polstring: 10px 30px;
Font-størrelse: 15px;

Style beholderen for listeelementene og angi sin vise eiendom til "ingen" slik at det er skjult i starten:

#karmer
Display: Ingen;
Min-bredde: 185px;

Og til slutt, style listeelementene, og sette skjermegenskapen deres til "ingen", Så de er også skjult i starten:

#carmakes a
Display: Block;
Bakgrunnsfarge: RGB (181, 196, 196);
polstring: 20px;
farge svart;
Tekstdekorasjon: Ingen;

Den komplette CSS -koden for denne demonstrasjonen:

#DDSection
Posisjon: relativ;
Display: Inline-block;

#Button
polstring: 10px 30px;
Font-størrelse: 15px;

#karmer
Display: Ingen;
Min-bredde: 185px;

#carmakes a
Display: Block;
Bakgrunnsfarge: RGB (181, 196, 196);
polstring: 20px;
farge svart;
Tekstdekorasjon: Ingen;

Å kjøre HTML nå vil opprette følgende utdata i nettleseren:

Listeartiklene er nå skjult, alt som er igjen å gjøre er å veksle visningseiendommen deres på knappetrykk. La oss gjøre det i neste trinn.

Trinn 3: Å bytte visningseiendom med JavaScript

Begynn i JavaScript -filen i å lage funksjonen Knappklikket (), som vil bli utført på trykk på knappen:

funksjon Buttonclicked ()
// Kommende kodelinjer hører til her

I denne funksjonen, få referansen til DIV med ID “Carmakes” som er beholderen for listeelementene som:

var container = dokument.getElementById ("Carmakes");

Etter dette, bruk container Variabel å vise og skjule rullegardinlisten ved hjelp av IF-Else-uttalelsen og visningsegenskapen til karemak div:

hvis (container.stil.display === "ingen")
container.stil.display = "blokk";
annet
container.stil.display = "ingen";

Den komplette JavaScript -koden for denne demonstrasjonen er som:

funksjon Buttonclicked ()
var container = dokument.getElementById ("Carmakes");
hvis (container.stil.display === "ingen")
container.stil.display = "blokk";
annet
container.stil.display = "ingen";

Etter dette, kjør bare HTML-filen i en nettleser og klikk på knappen for å vise og skjule rullegardinlisten:

Og rullegardinlisten fungerer helt bra.

Konklusjon

Rullegardinliste kan opprettes med en kombinasjon av HTML, CSS og JavaScript. Rullegardinlister legger til estetikken på websiden. For å opprette en rullegardinliste, opprette de nødvendige elementene i HTML-filen. I CSS -filen styler du elementene og skjuler dem ved å bruke sine vise eiendom. I JavaScript -filen, veksler du skjermegenskapen ved knappeklikk. I denne artikkelen ble opprettelsen av en rullegardinliste forklart trinn for trinn.