Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren

Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.

In der linken Auswahlliste (siehe Anwendungsbeispiel) kann man eine Option auswählen, darauf hin wird eine Anfrage über JavaScript an ein PHP-Script (Datei) gesendet. Dieses Script baut nun eine Verbindung zur Datenbank-Tabelle auf und liest deren Daten aus, diese werden dann in der rechten Auswahlliste ausgegeben.

Anwendungsbeispiel

-  

✲ Der Link funktioniert nicht wirklich, ist nur ein Beispiel!

Eine Anleitung wie das ganze genau funktioniert finden Sie in den folgenden Quelltexten.

Quelltext  Kopieren ❘ Ausblenden ❘ Zeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Verkettete Auswahllisten</title>

  <script>
  // Das XMLHttpRequest-Objekt setzen
  var xhr = new XMLHttpRequest();

  // Beim laden der Seite der ersten Auswahlliste den Event-Handler "change" geben,
  // dieser ruft dann (beim auswählen) die Funktion: loadSelection() auf.
  window.addEventListener('load', function() {
   document.getElementById("selection1").addEventListener("change", loadSelection);

   // Dem HTML-Button (id="anzeigen") den Event: "click" zuweisen
   // Dieser ruft dann die Funktion: readout() auf.
   document.getElementById("anzeigen").addEventListener("click", readout);
  });

  function loadSelection() {
   // Überprüfen ob nicht das erste Element in der Auswahlliste ausgewählt wurde
   if (document.getElementById("selection1").options[0].selected == false) {

    // Den Wert des ausgewählten Elements in der Auswahlliste auslesen
    var sel = document.getElementById("selection1").options[document.getElementById("selection1").selectedIndex].value;

    // Den Wert (sel) an die Datei: abfrage.php über GET senden
    xhr.open("GET", "abfrage.php?serie=" + sel);
    xhr.send(null);

    // Auf eine Antwort von der Datei: abfrage.php warten
    xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.status == 200) {

      // Alte Inhalte der zweiten Auswahlliste löschen
      document.getElementById("selection2").options.length = 0;

      // Die erhaltenen Daten in einzelne Objekte zerlegen (JSON)
      var obj = JSON.parse(xhr.responseText);

      // Neue Elemente in die zweite Auswahlliste einfügen
      for (var counter = 0; counter < obj.length; counter++) {
       document.getElementById("selection2").options[counter] = new Option(obj[counter].names, obj[counter].names);
      }
     }
    }
   }
  }

  function readout() {
   // Die Formulardaten über POST versenden
   xhr.open("POST", "abfrage.php", true);
   xhr.send(new FormData(document.getElementById("Form")));
   // Auf eine Antwort von der Datei: abfrage.php warten
   xhr.onreadystatechange = function () {
    // Status überprüfen
    if (xhr.readyState == 4 && xhr.status == 200) {
     // Antwort ausgeben
     document.getElementById("output").innerHTML = xhr.responseText;
    }
   }
  }
  </script>

 </head>
<body>

<h1>Verkettete Auswahllisten</h1>

<form id="Form">

<p>
<label>Star Trek Serie: 
<select name="selection1" id="selection1">
 <option selected="selected">- Bitte Auswählen -</option>
 <option value="TOS">The Original Series</option>
 <option value="TNG">The Next Generation</option>
 <option value="DSN">Deep Space Nine</option>
 <option value="VOY">Voyager</option>
 <option value="ENT">Enterprise</option>
</select>
</label> - 

<select name="selection2" id="selection2">
 <option>Personen</option>
</select>
<input type="button" value="anzeigen" id="anzeigen">
</p>

<div id="output"></div>

</form>

</body>
</html>

Quelltext „abfrage.php”  Kopieren ❘ Ausblenden ❘ Zeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php
// Verbindung zur Datenbank aufbauen
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');

// Wurden Daten über GET gesendet
if (isset($_GET["serie"])) {

 // Zur Sicherheit den übergebenen Wert überprüfen
 if (in_array($_GET["serie"], ["TOS", "TNG", "DSN", "VOY", "ENT"])) {

   // Einträge auslesen
  $stmt = $db->prepare("SELECT `name` FROM `persons`
                                      WHERE serie = :serie");
  $stmt->execute(["serie" => $_GET["serie"]]);
  $results = $stmt->fetchAll(PDO::FETCH_OBJ);

  // In einem Array speichern
  foreach ($results as $result) {
   $arr[] = ['names'=>$result->name];
  }

  // Und mit json_encode() ausgeben
  echo json_encode($arr);
 }
}


// Wurden Daten über POST gesendet
if (isset($_POST["selection1"])) {

 // Einträge auslesen
 $stmt = $db->prepare("SELECT `serie`, `name`, `link` FROM `persons`
                                     WHERE `serie` = :serie
                                         AND `name` = :name");
 $stmt->execute([":serie" => $_POST["selection1"],
                             ":name" => $_POST["selection2"]]);
 $results = $stmt->fetchAll(PDO::FETCH_ASSOC);

 // Einträge ausgeben
 foreach ($results as $result) {
  echo '<p>Serie: ' . $result["serie"] . '<br>';
  echo ' Name: ' . $result["name"] . '<br>';
  echo 'Link: <a href="' . $result["link"] . '">' . $result["link"] . '</a></p>';
 }
}
?>

DB-Tabelle

Folgende DB-Tabelle wurde im Anwendungsbeispiel verwendet:

CREATE TABLE `persons` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(35) COLLATE utf8_unicode_ci NOT NULL,
  `serie` varchar(4) COLLATE utf8_unicode_ci NOT NULL,
  `link` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `persons` (`id`, `name`, `serie`, `link`) VALUES
(1,	'James T. Kirk',	'TOS',	'kirk.htm'),
(2,	'Spock',	'TOS',	'spock.htm'),
(3,	'Leonhard McCoy',	'TOS',	'mccoy.htm'),
(4,	'Montgomery  Scott',	'TOS',	'scotty.htm'),
(5,	'Nyota Uhura',	'TOS',	'uhura.htm'),
(6,	'Hikaru Sulu',	'TOS',	'sulu.htm'),
(7,	'Pavel Chekov',	'TOS',	'chekov.htm'),
(8,	'Jean-Luc Picard',	'TNG',	'picard.htm'),
(9,	'William T. Riker',	'TNG',	'riker.htm'),
(10,	'Data',	'TNG',	'data.htm'),
(11,	'Deanna Troi',	'TNG',	'troi.htm'),
(12,	'Worf',	'TNG',	'worf.htm'),
(13,	'Beverly Crusher',	'TNG',	'bcrusher.htm'),
(14,	'Geordi LaForge',	'TNG',	'laforge.htm'),
(15,	'Wesley Crusher',	'TNG',	'wcrusher.htm'),
(16,	'Natasha Yar',	'TNG',	'yar.htm'),
(17,	'Benjamin Sisko',	'DSN',	'bsisko.htm'),
(18,	'Jadzia Dax',	'DSN',	'jdax.htm'),
(19,	'Odo',	'DSN',	'odo.htm'),
(20,	'Kira Nerys',	'DSN',	'nerys.htm'),
(21,	'Miles O´Brian',	'DSN',	'obrian.htm'),
(22,	'Julian Bashir',	'DSN',	'bashir.htm'),
(23,	'Citizen Quark',	'DSN',	'quark.htm'),
(24,	'Rom',	'DSN',	'rom.htm'),
(25,	'Elim Garak',	'DSN',	'garak.htm'),
(26,	'Ezri Dax',	'DSN',	'edax.htm'),
(27,	'Nog',	'DSN',	'nog.htm'),
(28,	'Jake Sisko',	'DSN',	'jsisko.htm'),
(29,	'Gul Dukat',	'DSN',	'dukat.htm'),
(30,	'Kathryn Janeway',	'VOY',	'janeway.htm'),
(31,	'Chakotay',	'VOY',	'chakotay.htm'),
(32,	'Tuvok',	'VOY',	'tuvok.htm'),
(33,	'Tom Paris',	'VOY',	'paris.htm'),
(34,	'B\'llanna Torres',	'VOY',	'torres.htm'),
(35,	'Harry Kim',	'VOY',	'kim.htm'),
(36,	'Neelix',	'VOY',	'neelix.htm'),
(37,	'Kes',	'VOY',	'kes.htm'),
(38,	'AK-1',	'VOY',	'ak1.htm'),
(39,	'Seven of Nine',	'VOY',	'son.htm'),
(40,	'Q',	'TNG',	'q.htm'),
(41,	'Guinan',	'TNG',	'guinan.htm'),
(42,	'Sarek',	'TOS',	'sarek.htm'),
(43,	'Jonathan Archer',	'ENT',	'archer.htm'),
(44,	'Charles Tucker',	'ENT',	'tucker.htm'),
(45,	'T\'Pol',	'ENT',	'tpol.htm'),
(46,	'Hoshi Sato',	'ENT',	'sato.htm'),
(47,	'Malcom Reed',	'ENT',	'reed.htm'),
(48,	'Phlox',	'ENT',	'phlox.htm'),
(49,	'Travis Mayweather',	'ENT',	'mayweather.htm'),
(50,	'Leeta',	'DSN',	'leeta.htm');

Voraussetzung

PHP 5.6+, MySQL/MariaDB - Datenbank

Tipps

Seiten dynamisch mit PHP erstellen
Vielleicht kennen Sie dieses Problem: Sie möchten gerne eine Seite ohne Frames erstellen, wollen aber auch nicht bei jeder Änderung an der Navigation alle Seiten ändern. Nur mit HTML gibt es hier keine Lösung und nicht jeder Benutzer hat JavaScript im Browser aktiviert, stattdessen sollten Sie auf PHP zurückgreifen.
Lokalen Webserver einrichten und verwenden
Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
Suchanfrage an eine Datenbank über AJAX senden und empfangen
Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
Diese Schlagwörter könnten Sie interessieren:
Zeitansage Diashow Quelltext Dynamische Seiten Mauszeiger localStorage Zeitbalken Veranstaltungsliste Marquee Wecker MySQL Datenschutz-Hinweis Wasserzeichen Canvas Seitenformatierung Rahmen Zoom-Funktion Gästebuch JSON Mimetypen