Wie fülle ich mithilfe von JavaScript eine Dropdown-Liste basierend auf einer Auswahl in einer anderen?

Ein Dropdown-Menü basierend auf der Auswahl in einem anderen auffüllen

Bei der Arbeit mit Dropdown-Listen ist es häufig erforderlich, den Inhalt eines Dropdown-Menüs basierend auf der Auswahl zu ändern über die Auswahl in einem anderen. In JavaScript kann dies erreicht werden, ohne dass Datenbankabfragen erforderlich sind. Hier ist ein Beispiel dafür:

Der bereitgestellte Code ist in zwei Funktionen unterteilt:

1. configureDropDownLists(ddl1, ddl2): Diese Funktion benötigt zwei Argumente, das sind die beiden Dropdown-Listen, die verknüpft werden. Es verwendet den Wert des ersten Dropdown-Menüs (ddl1), um zu bestimmen, welche Optionen im zweiten Dropdown-Menü (ddl2) ausgefüllt werden sollen.
2. createOption(ddl, text, value): Diese Hilfsfunktion erstellt ein Optionselement für die Dropdown-Liste und fügt es der Optionssammlung des Dropdowns hinzu.

Im Beispiel-HTML-Code haben wir zwei Dropdown-Listen: ddl1 und ddl2. Wenn ein Benutzer eine Option in der ddl1-Dropdown-Liste auswählt, wird das onchange-Ereignis ausgelöst, das die Funktion configureDropDownLists() aufruft.

Die Funktion configureDropDownLists() löscht zunächst die Optionen aus ddl2 und fügt dann basierend auf neue Optionen hinzu der in ddl1 ausgewählte Wert. Wenn der Benutzer beispielsweise „Farben“ in ddl1 auswählt, füllt die Funktion ddl2 mit Optionen für Farben wie „Schwarz“, „Weiß“ und „Blau“.

Wenn Sie dem bereitgestellten Code folgen, können Sie dies ganz einfach tun Füllen Sie ein Dropdown-Menü basierend auf der Auswahl in einem anderen aus, ohne dass komplexe Datenbankabfragen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie fülle ich mithilfe von JavaScript eine Dropdown-Liste basierend auf einer Auswahl in einer anderen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!