So erstellen Sie ein Dropdown -Menü mit JavaScript

JavaScript fügt Ihrer Website ein dynamisches Verhalten hinzu. Sie können verschiedene Dropdown -Menüs, Navigationsleisten, Animationen erstellen und die Reaktion der Seite auf jeden Klick behandeln. Dies macht die Webseite interaktiv und fügt einer Website „Leben“ hinzu.

Viele Entwickler verlassen sich für diese Zwecke auf Bootstrap, da sie mit integrierten Komponenten ausgestattet werden können, die leicht wiederverwendet werden können, und die Produktivität eines Entwicklers erhöhen, aber zu verstehen, wie jedes Ding für sich zuerst funktioniert. Hier in diesem Artikel werden wir diskutieren, wie man ein erstellt Dropdown-Menü Verwenden von JavaScript.

Dropdown -Menü mit JavaScript

Wir alle haben Dropdown -Menüs gesehen und sie verwendet, während wir verschiedene Online -Formulare für die Auswahl einer bestimmten Stadt, des Staates oder der Auswahl einfach aus einer Reihe von Dropdown -Optionen, die uns zur Verfügung gestellt wurden, ausfüllten.

Dies sind Togglable -Menüs, die aus mehreren Optionen bestehen, aus denen der Benutzer eine bestimmte Option auswählen kann. Diese Optionen können entweder in der HTML -Liste oder in JavaScript als Array definiert werden und sie sind mit einer Funktion zugeordnet. Wenn ein Benutzer auf eine Option klickt, wird die Funktion ausgelöst und eine entsprechende Aktion erfolgt.

Wichtige Punkte für das Erstellen eines Dropdown -Menüs

Sie können ein einfaches Dropdown -Menü unter Verwendung einer HTML -Liste erstellen, die das verwendet Tag zusammen mit dem Schild. Eine ID wird der Liste zur Verfügung gestellt, die in JavaScript verwendet wird, um die vom Benutzer ausgewählte Option zu erhalten.

Sie können ein komplexeres Dropdown -Menü mit hauptsächlich JavaScript mit ein wenig HTML erstellen. Die Optionen werden als Array in JavaScript definiert.

Lassen Sie uns jeden von diesen besser mit dem Code für ein besseres Verständnis verstehen.

Einfaches Dropdown -Menü

Erstellen Sie zunächst eine Liste in HTML und geben Sie eine ID in einem Formular -Tag an. Hier bieten wir sie „Option“ als ID an.

Die Optionen werden in jedem Tag definiert und bei der Änderung wird eine Funktion aufgerufen.

Die Funktion wird in JavaScript mit dem Namen "DropdownMenu ()" definiert, der auslöst, wenn die Option ausgewählt ist.

Das Letzte ist, dass eine Eingabe mit der ID "City" erstellt wird, in der die Option vom Benutzer ausgewählt wird.

Wählen Sie Ihre Stadt aus der Liste aus

---Wählen Sie Stadt---
New York
Amsterdam
Paris
London

Ihre ausgewählte Stadt ist:

Ausgang:

Dropdown -Menü mit DIV zusammen mit JavaScript

Erstellen Sie zunächst zwei Divs im HTML -Tag, die die Funktion auslöst und das Menü auf dem Bildschirm angezeigt.

Definieren Sie die Liste als Array in JavaScript und verwenden Sie DocumNet.methode createLement () zum Erstellen einer Dropdown -Liste programmgesteuert in JavaScript

Rufen Sie dann die Methode appendChild () an, um das Dropdown -Menü am Ende der Liste anzuhängen.

Zeigen Sie die Liste

Ausgang:

Abschluss

JavaScript wird zum Erstellen verschiedener interaktiver Elemente auf der Webseite verwendet, um das dynamische Verhalten der Seite zu erhöhen. In diesem Artikel haben wir ein Dropdown -Menü in JavaScript mit dem Code erstellt. Zunächst wurde ein einfaches Dropdown -Menü mit HTML erstellt und über JavaScript aufgerufen. Dann haben wir es komplex gemacht und das Dropdown -Menü mit JavaScript und einem kleinen HTML -Stück erstellt. Die Elemente wurden als Array definiert und ein Dropdown-Menü wurde mit integrierten Methoden erstellt. Code wird für beide für Ihr besseres Verständnis bereitgestellt.