So erstellen Sie eine Dropdown -Liste mit JavaScript?

HTML und CSS werden verwendet, um atemberaubende Webseiten zu erstellen. Wenn JavaScript jedoch in Kombination verwendet wird, ist das Ergebnis absolut phänomenal. Eine wirklich coole Sache an einer Webseite sind die Dropdown-Listen. Jetzt sind im Internet viele Frameworks verfügbar. Dieser Artikel zeigt, wie Sie eine grundlegende Dropdown-Liste mit Hilfe von HTML, CSS und JavaScript erstellen können.

Schritt 1: Richten Sie das HTML -Dokument ein

Erstellen Sie zunächst ein HTML -Dokument und legen Sie die folgenden Zeilen in die HTML -Datei ein:

Wählen Sie Auto machen


Porsche
Mercedes
BMW
Audi
Bugatti

Erklären wir, was hier vor sich geht:

• Ein Elternteil wird mit dem i erstelltd = "ddsection", Später wird diese DIV verwendet, um seine Kinderelemente auszurichten im Einklang damit
• Es wird eine Schaltfläche erstellt, die das aufruft Buttonclicked () Methode nach Klick. Diese Schaltfläche wird verwendet, um die Dropdown-Liste anzuzeigen.
• Danach wird eine weitere DIV mit dem Ausweis „Carmakes“ erstellt, der eine Reihe von Optionen darin speichern wird. Diese DIV funktioniert wie ein Behälter für die Tags, die darin platziert sind.

Durch das Ausführen des HTML -Dokuments gibt es den folgenden Ausgang zum Browser:

Da es in der Ausgabe sichtbar ist, befinden sich die Elemente der Dropdown-Liste nicht an der richtigen Stelle. Sie sollten sein:

• Versteckt, bis die Schaltfläche angeklickt wird
• Vertikal in die Taste einbeziehen, da es sich um eine "Dropdown" -Liste handelt

Lassen Sie uns das im nächsten Schritt beheben

Schritt 2: Behebung der Elemente der Dropdown-Liste mit CSS

Setzen Sie zunächst die übergeordnete Divs (deren ID dDection ist) die Eigenschaft an "Inline-Block", Stellen Sie auch seine Position auf "relativ":

#DDSEction
Position: Relativ;
Anzeige: Inline-Block;

Fügen Sie danach der Schaltfläche etwas Styling hinzu:

#Taste
Polsterung: 10px 30px;
Schriftgröße: 15px;

Stylen Sie den Container für die Listenelemente und setzen Sie seine fest Anzeige Eigentum an "keiner" so dass es zu Beginn versteckt ist:

#Carmakes
Anzeige: Keine;
Min-Width: 185px;

Und schließlich stylen Sie die Listenelemente und setzen Sie ihre Anzeigeeigenschaft auf "keiner", Sie sind also auch zu Beginn versteckt:

#Carmakes a
Bildschirmsperre;
Hintergrundfarbe: RGB (181, 196, 196);
Polsterung: 20px;
Farbe: Schwarz;
Textdekoration: Keine;

Der vollständige CSS -Code für diese Demonstration:

#DDSEction
Position: Relativ;
Anzeige: Inline-Block;

#Taste
Polsterung: 10px 30px;
Schriftgröße: 15px;

#Carmakes
Anzeige: Keine;
Min-Width: 185px;

#Carmakes a
Bildschirmsperre;
Hintergrundfarbe: RGB (181, 196, 196);
Polsterung: 20px;
Farbe: Schwarz;
Textdekoration: Keine;

Durch Ausführen der HTML wird jetzt die folgende Ausgabe im Browser erstellt:

Die Listenelemente sind jetzt verborgen. Lass uns das im nächsten Schritt machen.

Schritt 3: Umschaltungseigenschaft mit JavaScript umschalten

Beginnen Sie in der JavaScript -Datei mit dem Erstellen der Funktion Buttonclicked (), die beim Drücken der Taste ausgeführt werden:

Funktion buttonclicked ()
// bevorstehende Codezeilen gehören hierher

Erhalten Sie in dieser Funktion die Referenz des DIV mit ID „Carmakes“, dem Container für die Listenelemente wie:

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

Verwenden Sie danach die Container Variable, um die Dropdown-Liste mit Hilfe der IF-ELSE-Anweisung und der Anzeigeeigenschaft der Anzeige anzeigen und zu verbergen Caremakes div:

if (Behälter.Stil.display === "Keine")
Container.Stil.display = "block";
anders
Container.Stil.display = "keine";

Der vollständige JavaScript -Code für diese Demonstration lautet wie:

Funktion buttonclicked ()
var container = dokument.GetelementById ("Carmakes");
if (Behälter.Stil.display === "Keine")
Container.Stil.display = "block";
anders
Container.Stil.display = "keine";

Führen Sie danach einfach die HTML-Datei in einem Browser aus und klicken Sie auf die Schaltfläche, um die Dropdown-Liste anzuzeigen und auszublenden:

Und die Dropdown-Liste funktioniert vollkommen in Ordnung.

Abschluss

Die Dropdown-Liste kann mit einer Kombination aus HTML, CSS und JavaScript erstellt werden. Dropdown-Listen fügen zur Ästhetik der Webseite hinzu. Um eine Dropdown-Liste zu erstellen, erstellen Sie die erforderlichen Elemente in der HTML-Datei. Stylen Sie in der CSS -Datei die Elemente und verstecken Sie sie mit ihrer Anzeige Eigentum. Schalten Sie in der JavaScript -Datei die Anzeigeeigenschaft bei der Schaltfläche Klicken. In diesem Artikel wurde die Erstellung einer Dropdown-Liste Schritt für Schritt erläutert.