Kaskadierendes Dropdown-Menü: Automatisches Ausfüllen des zweiten Menüs basierend auf der ersten Auswahl
In diesem Szenario möchten wir zwei miteinander verbundene Dropdown-Menüs erstellen, Dabei ändern sich die Optionen im zweiten Menü dynamisch basierend auf der im ersten Menü getroffenen Auswahl.
Anfängliche HTML-Struktur:
1 2 3 4 5 6 7 8 9 10 11 |
|
Ereignisbehandlung:
Um die gewünschte Funktionalität zu erreichen, verwenden wir einen Ereignis-Listener im ersten Dropdown-Menü, um einen Ajax-Aufruf auszulösen, wenn sich die Auswahl ändert.
1 2 3 4 5 6 7 8 9 10 |
|
Umgang mit Ajax Anfrage:
In der Datei „process.php“ erstellen wir die Optionen für das zweite Dropdown-Menü basierend auf der ausgewählten Kategorie.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
Dynamisches Aktualisieren des zweiten Dropdown-Menüs :
Der Ajax-Aufruf füllt das #items-Element mit den neuen Optionen, die in process.php generiert werden.
1 |
|
Benutzerdefinierte Implementierung ohne Datenbank:
Wenn Sie keine Datenbank haben, können Sie die Optionen für jede Kategorie in einem Array manuell definieren und das zweite Dropdown-Menü über JavaScript aktualisieren.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
Das obige ist der detaillierte Inhalt vonWie erstelle ich ein kaskadierendes Dropdown-Menü mit automatisch ausgefülltem zweiten Menü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!