Dropdown Menü aus DB dynamisch erstellen

Heute möchte ich euch zeigen, wie man sich ein Dropdown Menü dynamisch aus einer Mysql DB erstellt. Als erstes erstellen wir uns eine Tabelle mit zwei Spalten, eine Spalte ist Primary Key „id“ und die andere Spalte enthält die Router Namen.

Als erstes verbinden wir uns mit der Datenbank und schreiben per prepared Statement die Ausgabe aus der Datenbank in das Array „$router“. Dann erstellen wir uns ein HTML Formular und fügen das Dropdown Menü (select) ein. Nun müssen wir die „option“ Tags für das Select Menü erstellen. Dazu wird das Array $router per for-Schleife Zeile für Zeile ausgegeben und in option Tags eingebettet.

Die for-Schleife in den Zeilen 30-32 erzeugt die ganze Dynamik des Formulars. Zur Erklärung, wir müssen die option Tags wie folgt erzeugen:

Dies geschieht alles in Zeile 31. In dem Array $router sind alle Werte aus der DB enthalten, die „id“ und der „routername“. Da wir nicht wissen wieviel Einträge das Array hat, lassen wir es durch eine for-Schleife laufen und erhöhen bei jedem Durchlauf die Variable $i.

Mittels

  • $router[$i][‚id‘] <– id = Datenbank Spalte ‚id‘, die Namen müssen gleich sein
  • $router[$i][‚routername‘] <– routername = Datenbank Spalte ‚routername‘, die Namen müssen gleich sein

holen wir Zeile für Zeile die Werte aus der DB und tragen sie in die option Tags ein. Das ist die ganze Herrlichkeit.

Dropdown Menü mit vorausgewähltem option Tag

Wenn wir nun z.B. einen Routernamen vorauswählen wollen, abhängig von dem was unser User gewählt hat, müssen wir im Prinzip nur eine Zeile in unserem Script ändern. Wir müssen in einem option Tag nur das keyword „selected“ einfügen.

Beispiel hier wird router2 im Dropdown Menü angezeigt:

Wie machen wir das am besten. Wir müssen auf alle Fälle das Formular einmal abgesendet haben. Dann bekommen wir eine $_POST[‚router‘] Variable übergeben, in der die id aus der Datenbank steht.

Nun müssen wir bei jedem Zeilendurchlauf die id aus der Datenbank mit dem Wert der der $_POST[‚router‘] Variable vergleichen. Wenn beide Werte gleich sind, fügen wir das Keyword „selected“ in den option Tag ein. Dazu bedienen wir uns der Kurzschreibweise von if/else, da wir das innerhalb eines echo benötigen.

 

Als erstes schreiben wir die globale $_POST[‚router‘] Variable in eine $id Variable und ändern dann die Zeile 31 wie folgt:

HTML Formular als Quelltext, hier sieht dass die $_POST[‚router‘] Variable = 3 ist und im Menü der Router3 vor ausgewählt wurde.

 

 

 

 

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.