zweites Dropdown Menü abhängig vom ersten Dropdown anzeigen

Hier will ich euch mal zeigen, wie ich mir eine Navigation mit zwei Dropdown Menüs gebaut habe. Anforderung war allerdings, dass das zweite Dropdown Menü sich abhängig von der Auswahl des ersten Dropdown Menüs ändern soll. Im ersten Dropdown Menü lasse ich mir alle Router anzeigen die in der Datenbank stehen. Wenn ich einen Router ausgewählt habe, soll das zweite Dropdown Menü eingeblendet werden und nur die Interfaces auswählbar sein, die am Router verfügbar sind.

Ich habe hier meine altbewährte Mysql Tabelle „router“ genommen und noch eine zweite Tabelle „interfaces“ erstellt.

Zur Erklärung, in der Tabelle „interfaces“ gibt es eine Spalte „rtr_id“, das ist die „id“ aus der Tabelle „router“. Router 4 hat die id=4, somit gehören alle Interfaces aus der Tabelle „interfaces“ dem Router 4, wo die „rtr_id“ = 4 ist. Zur Vereinfachung haben alle Interfaces als zweite Zahl die Nummer des Routers (Router 4 = TenGigE0/4/x/y).

Ich habe mir nun eine PHP Script „inc.functions.php“ erstellt in dem ich all meine PHP Funktionen reinschreibe. Wir müssen in zwei PHP Scripten die DB Verbindung aufbauen und ich habe jeweils eine Funktion für die Dropdown Menüs geschrieben. Dieses Script include ich in jeder anderen PHP Datei.

Nun erstellen wir uns eine HTML Seite mit einem Formular in dem zunächst nur das Dropdown Menü für die Router und der Submit Button angezeigt werden. Des Weiteren erstellen wir noch einen DIV Container „interfaces“ für das Dropdown Menü interfaces und einen DIV Container „wait“ für die Lade Grafik. Da wir das Dropdown Menü „router“ abschicken müssten um das Dropdown Menü „interfaces“ zu erstellen machen wir das ganze mit Ajax. Wir rufen per Ajax Post Request das Script „interfaces.php“ auf. Wenn der Ajax Request abgeschickt wurde blenden wir die Lade Grafik, das Dropdown Menü „interfaces“ und den Submit Button ein. Wenn das Dropdown Menü „router“ ein zweites Mal betätigt wird, blenden wir das Dropdown Menü „interfaces“ und den Submit Button wieder aus. Dann wird der Ajax Post Request abgeschickt, und wir blenden die Lade Grafik aus und den Rest wieder ein.

Das PHP Script mit dem „router“ Dropdown Menü.

Nun kommt noch die ganze Jquery Logik dazu, die dieses Vorhaben ermöglicht. Die Zeile 5 in der Java Script Datei bräuchte man normalerweise nicht, wenn man den Submit Button in der router.php per default ausblendet (style=“display: none;“). Ich wollte hier nur mal die verschiedenen Möglichkeiten aufzeigen.

Anbei ein paar Bilder wie das Menü aussieht, das erste ist der Ausgangszustand, es wird nur ein Dropdown Menü gezeigt, dann das Bild mit der Ladegrafik, dann sieht man wie das zweite Dropdown Menü und der Submit Button eingeblendet. Als letztes sieht man die Auswahl der verfügbaren Interfaces am Router1. Hübsch machen müsst ihr das Menü selber. 🙂

So sieht es mit bewegten Bildern aus. 🙂