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.
Demo
Eine Anleitung wie das ganze genau funktioniert finden Sie in den folgenden Quelltexten.
➜ Das obere Demo unterscheidet sich geringfügig vom gezeigten Quelltext.
Quelltext: Ausblenden ❘ Kopieren ❘ Link ❘ 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 Ausblenden ❘ Kopieren ❘ Link ❘ 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();
// In einem Array speichern
foreach ($results as $result) {
$arr[] = ['names' => $result["name"]];
}
// Und mit json_encode() ausgeben
exit(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->fetch();
// Eintrag ausgeben
if ($stmt->rowCount() > 0) {
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
Viel Spaß damit!
Tipps
- Grafik als Zeichenkette speichern und wieder als Grafik ausgeben
- Grafiken (Bilder) können problemlos als Zeichenkette gespeichert und wieder ausgelesen werden, wie das genau funktioniert und welchen Sinn es hat erfahren Sie hier.
- Zeichenkodierung - Schriftzeichen richtig darstellen
- Oft werden Umlaute, Akzentzeichen oder andere fehlerhafte Zeichen auf der Webseite angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular der Website, kann falsche Umlautzeichen enthalten. Beispiele um diese Zeichen in der richtigen Zeichenkodierung darzustellen.
- 10 Regeln zu Dateinamen
- Die Entscheidung, wie Sie die Dateien und Verzeichnisse (Ordner) auf Ihrer Website benennen ist nicht ganz Ihnen überlassen. Es gibt einiges, worauf Sie bei dieser Wahl achten müssen.
- Checkbox (Mehrfachauswahl) und DB-Ausgabe
- Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
localStorage Sicherheit Rahmen Passwortschutz Sortierkasten Blend-Mode Kalenderwoche Mauszeiger Dynamische Seiten Dateibrowser Inhaltsverzeichnis RegEx Zeit-Differenz Absolute URL Modal-Fenster Zeitansage Kommentar-Box Favicon Bausteine Formular Generator Seitenformatierung Linkliste Authentifizierung Wasserzeichen Arithmetische Operatoren