Verwandte Dropdown-Listen sie sind ein sehr nützliches Element der Webentwicklung. Sie ermöglichen die Erstellung dynamischer Formulare, bei denen die Auswahl eines Werts die Verfügbarkeit der Quelldaten in einer anderen Dropdown-Liste beeinflusst. Diese Listen werden häufig verwendet, um relevante Optionen zu filtern oder auszuwählen, abhängig von den vom Benutzer eingegebenen Parametern.
Die Grundidee hinter diesem Funktionselement besteht darin, dem Benutzer die Möglichkeit zu geben, einen Wert in der ersten Liste auszuwählen und dann den Inhalt der zweiten Liste zu aktualisieren, um nur die entsprechenden Optionen anzuzeigen. Auf diese Weise wird dem Benutzer nur die Optionen zur Verfügung gestellt, die im ausgewählten Kontext wirklich sinnvoll sind.
Das Erstellen verwandter Dropdown-Listen kann insbesondere für angehende Webentwickler eine Herausforderung darstellen. Mit diesem detaillierten Leitfaden können Sie diese Fähigkeit jedoch leicht beherrschen und in Ihren Projekten anwenden.
Was sind verwandte Dropdown-Listen?
Nehmen wir zum Beispiel an, wir haben zwei Listen: die erste Liste ist eine Liste von Ländern und die zweite Liste enthält eine Liste von Städten, die nur für das ausgewählte Land verfügbar sind. Wenn Sie ein bestimmtes Land in der ersten Liste auswählen, wird der Wert der zweiten Liste automatisch von den entsprechenden Städten aktualisiert.
Die Webentwicklung verwendet Markupsprachen wie HTML und CSS und Programmiersprachen wie JavaScript, um verwandte Dropdown-Listen zu implementieren.
Verwandte Dropdown-Listen vereinfachen die Datenauswahl für Benutzer und helfen Ihnen, interaktive und dynamische Formulare zu erstellen.
Arbeitsprinzip
Das Erstellen verwandter Dropdown-Listen basiert auf der Verwendung von JavaScript und einem HTML-Formular. Wenn Sie einen Wert in einer Dropdown-Liste auswählen, wird die andere Liste automatisch aktualisiert, um die entsprechenden Optionen anzuzeigen.
Zu Beginn des Prozesses müssen Sie die Dropdown-Listen und ihre Abhängigkeit definieren. Jeder Liste wird eine eindeutige ID zugewiesen, damit sie im Skript identifiziert werden können.
Dann wird JavaScript-Code erstellt, der das Wertänderungsereignis in der ersten Liste behandelt. Wenn der Benutzer einen Wert auswählt, wird eine Funktion aufgerufen, die den Inhalt der zweiten Liste mit der innerHTML-Methode aktualisiert. Die zweite Liste wird basierend auf der Auswahl des Benutzers in der ersten Liste mit neuen Optionen neu gezeichnet.
Dazu können Sie Datenstrukturen wie Arrays oder Objekte verwenden, die die entsprechenden Optionen für jeden Wert in der ersten Liste speichern. Wenn der Benutzer den Wert der ersten Liste ändert, ruft das Skript die entsprechenden Optionen aus der Datenstruktur ab und füllt die zweite Liste mit neuen Optionen aus.
Am Ende müssen Sie die JavaScript-Ausführung an das HTML-Formular binden, damit das Wertänderungsereignis in der ersten Liste die entsprechende Aktualisierungsfunktion der zweiten Liste auslöst.
Das Erstellen verwandter Dropdown-Listen macht es daher einfach und bequem, die Auswahl von Optionen basierend auf dem ausgewählten Wert in einer anderen Liste zu organisieren.
Vorteile der Verwendung verwandter Dropdown-Listen
Hier sind einige Vorteile der Verwendung verwandter Dropdown-Listen in Ihrer Webanwendung:
- Verbesserte Benutzererfahrung: Mit Themenlisten können Benutzer die gewünschten Werte schnell und einfach finden, da die Auswahloptionen automatisch entsprechend der vorherigen Auswahl aktualisiert werden.
- Reduzieren des Codevolumens: Anstatt eine große Anzahl von serverseitigen Dropdown-Listen und bedingten Operatoren zu verwenden, können Sie mit verknüpften Listen alle möglichen Kombinationen von Werten an einem Ort gruppieren.
- Dateneingabesicherheit: Verknüpfte Listen können verwendet werden, um gültige Werte einzuschränken, um zu verhindern, dass der Benutzer falsche Daten eingibt.
- Speichern von Platz auf einer Seite: Mit Themenlisten können Sie den Platz auf der Seite effizient nutzen, da sie nur bei Bedarf angezeigt werden und automatisch ausgeblendet werden, wenn eine bestimmte Kombination von Werten ausgewählt ist.
Insgesamt ist die Verwendung verwandter Dropdown-Listen eine bequeme und effiziente Möglichkeit, Daten in interaktiven Formularen zu verwalten und eine angenehmere Benutzererfahrung zu bieten.
So erstellen Sie verknüpfte Dropdown-Listen in HTML
Es kann jedoch manchmal notwendig sein, verknüpfte Dropdown-Listen zu erstellen, was bedeutet, dass die Werte der zweiten Liste vom ausgewählten Wert der ersten Liste abhängen. Wenn beispielsweise "Obst" in der ersten Liste ausgewählt ist, werden in der zweiten Liste nur Früchte angezeigt.
Sie können JavaScript oder jQuery verwenden, um verwandte Dropdown-Listen in HTML zu erstellen, aber Sie können auch einfaches HTML und CSS verwenden.
Das folgende Beispiel zeigt, wie Sie verknüpfte Dropdown-Listen erstellen, ohne JavaScript oder jQuery zu verwenden:
#second-listIn diesem Beispiel haben wir zwei Dropdown-Listen. Die erste Liste mit der ID "first-list" ist eine Kategorieauswahl - "Obst" oder "Gemüse". Die zweite Liste mit der ID "second-list" ist eine Auswahl eines bestimmten Elements.
Mit CSS setzen wir die Eigenschaft "display: none" für die zweite Liste so, dass sie zunächst ausgeblendet wird.
Als nächstes müssen wir ein wenig JavaScript hinzufügen, um die zweite Liste basierend auf dem ausgewählten Wert der ersten Liste anzuzeigen:
JavaScript:
document.getElementById("first-list").addEventListener("change", function() else >);
In diesem Beispiel fügen wir der ersten Liste einen Ereignis-Listener hinzu. Wenn sich der Wert der ersten Liste ändert, erhalten wir den ausgewählten Wert und prüfen, ob er "fruits" ist. Wenn ja, zeigen wir die zweite Liste mit der Eigenschaft "display: block" in CSS an. Wenn nicht, verstecken wir die zweite Liste mit der Eigenschaft "display: none" in CSS.
Daher werden verwandte Dropdown-Listen in HTML erstellt, ohne JavaScript oder jQuery zu verwenden. Aber denken Sie daran, dass Sie möglicherweise JavaScript oder jQuery verwenden müssen, wenn Sie komplexere Anforderungen haben oder wenn Sie möchten, dass Ihre Listen in allen Browsern funktionieren.
Schritt 1: Erstellen eines HTML-Formulars
Bevor Sie mit der Erstellung verwandter Dropdown-Listen beginnen, müssen Sie ein HTML-Formular erstellen, in dem sie sich befinden. Das HTML-Formular wird verwendet, um Informationen vom Benutzer zu sammeln.
Zuerst müssen Sie ein Tag erstellen
