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 ❘ ◑


<!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 ❘ ◑

<?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

verkettete_auswahllisten.zip

Viel Spaß damit!

Tipps

Seiten druckfrisch gestalten: Mancher Besucher einer Website möchte eine bestimmte Seite ausdrucken, auf dem Papier stören dann Elemente wie Werbung, Navigationsleisten, großflächige Design-Elemente oder andere Elemente. Wie Sie diese vor dem drucken "wegzaubern" erfahren Sie hier.

Webseiten schneller machen: Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.

Umstellung von der PHP-Funktion mysql() zu mysqli(): Zur Zeit stellen viele Provider auf PHP 7 um, mit dieser neuen PHP-Version werden viele "alte" Scripte nicht mehr laufen die auf eine Datenbank zugegriffen haben.

Diashow: Die Diashow liest Bilder aus einem Verzeichnis aus (mit PHP), und zeigt diese mit Hilfe von JavaScript an.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.