✔ Weiterverwenden von Dropdown Arrays

Q

Quu

Grünschnabel
Hallo zusammen

Ich bin an einem Reservierungsmodul, welches dem User als erstes ein Dropdown von Modulen wieder gibt (funktioniert). Das ganze aus einer MySQL DB.

Nun möchte ich jedoch die Zusatzinfos des ausgewählten Moduls unterhalb des Dropdowns wieder geben, hier scheitere ich. Ich hoffe, jemand kann mich auf den richtigen Weg bringen (ohne JavaScript/JQuery etc.)
Code: 
<?php
include '../database/connect.php';
header('Content-Type: text/html; charset=ISO-8859-1');
?>

<!DOCTYPE html>

<body>
<div class="container">
<h2>Modulreservierung</h2>
<?php
  $sql = "SELECT id, modul_name, wer FROM mod_erfassung";
  //echo $sql;
  echo "<select modul_id='id'>";
  $result = $con->query($sql);
   if($result->num_rows >0 ) {
     while($row = $result->fetch_assoc()) {
       $id = $row['id'];
       $modul_name = $row['modul_name'];
?>  
     <option>  <?=$row["modul_name"]?></option>      
<?php 
     }
  }
?>
</select>

<?php
while ($result == $row['id']) {
   echo $row['id'];
}
?>
</div>
</body>
</html>

Die letzte while-Schleife ist nur ein Versuch von vielen verschiedenen. Ich bringe es nicht fertig, ausserhalb des Dropdowns die gewünschten Zusatzinfos aus dem bereits vorhandenen Array heraus zu nehmen und anzuzeigen.

Thx for little help....
 
Hi,

ohne Javascript oder der gleichen wirst du das nicht hinbekommen.

Der Code wird ja generiert wenn du ihn aufrufst. Wenn du nun in deinem dropdown etwas auswählst muss das ganze, hier die ID, zum Server gesendet werden. Das was dann zurück kommt kann ausgegeben werden. Hierfür brauchst du am besten jquery.

Ich schreibe grade mit dem smartphone daher entschuldige vllt. Wegen mein Fehlern im Text. Ich hoffe du konntest mich verstehen.

Gruß
 
Danke erstmals. Dann mache ich mich halt trotzdem mit jQuery mehr vertraut... hast du mir ein gutes tutorial welches auf dieses Thema explizit eingeht. Herr und Frau Google findet viel über Dropdown's, jedoch wenig über weiterverwendung von Dropdowns.
 
Beginnen wir zuerst einmal mit dem Formular mit dem Auswahlfeld – es hat so weit keine Besonderheiten. Es handelt sich um ein form-Element, in dem sich eine select-Liste mit den einzelnen Optionen zur Auswahl befindet:

HTML: 
<form>
      <p>
        <label for="orte">Orte</label>:
        <select id="orte" name="orte">
          <option value="">wählen</option>
          <option value="Brasilien">Brasilien</option>
          <option value="Deutschland">Deutschland</option>
          <option value="USA">USA</option>
        </select>
       </p>
      </form>
      <div id="ausgabe"></div>

Außerdem gibt es unterhalb des Formulars ein div-Element mit id="ausgabe". Dort sollen die Ergebnisse der Abfrage angezeigt werden.

Wenn wir die Aufgabe mit den klassischen Methoden ohne Ajax programmieren würden, müssten wir normalerweise in das Formular einen Absendebutton integrieren. Außerdem würden wir im form-Starttag die Übertragungsart spezifizieren und bei action das Skript benennen, das die Verarbeitung übernehmen soll.

Wir machen hier nichts dergleichen, sondern beginnen mit der an die JavaScript Programmierung:

Javascript: 
$(function () {
     $('#orte').change(function() {
       if($(this).val() != "") {
         $.get(
           "daten.php",
           { wahl: $(this).val() },
           function(daten) {
             $('#ausgabe').html(daten);
           });
       }
     });
   });

Am Anfang steht wieder $(function(), da der Code erst ausgeführt werden soll, wenn die Webseite geladen ist.

In Zeile 2 verwenden wir den Eventhandler change. Damit reagieren wir darauf, dass eine Änderung beim Auswahlfeld mit id="orte" ausgeführt wird. Was dann geschehen soll, beginnt in Zeile 3.

Zuerst einmal überprüfen wir, ob der aktuelle Wert nicht gleich dem Leerstring ist. val() ist ein jQuery-Befehl, um den Wert (Inhalt) von Formularfeldern auszulesen.

Wir haben in unserem Feld vier option-Elemente. Beim ersten ist als value="" angegeben – der Leerstring – und es wird der Text wählen angezeigt:

HTML: 
<select id="orte" name="orte">
          <option value="">wählen</option>
          <option value="Brasilien">Brasilien</option>
          <option value="Deutschland">Deutschland</option>
          <option value="USA">USA</option>
        </select>

Wir wollen nur eine Aktion ausführen, wenn eine der anderen Optionen gewählt ist. Das erreichen wir mit der Überprüfung if($(this).val() != "") aus Zeile 3.

Nur wenn eine Option mit einem Wert für value gewählt wurde, wird der folgende Code ausgeführt:

Javascript: 
$.get(
           "daten.php",
           { wahl: $(this).val() },
           function(daten) {
             $('#ausgabe').html(daten);
           });

$.get() ist eine jQuery-Methode, um GET-Requests asynchron durchzuführen. Sie erwartet mehrere Parameter:

  • zuerst den Namen des Skripts, das asynchron aufgerufen werden soll. Im Beispiel heißt das Skript daten.php.
  • Als zweiten Parameter kannst Du die Daten angeben, die an das Skript übergeben werden sollen. Im Beispiel übergeben wir einen Parameter mit dem Namen wahl, dem der gerade über die Auswahlliste im Formular ausgewählte Wert zugewiesen wird.
  • Als dritten Parameter gibst Du eine Funktion an, die aufgerufen wird, wenn die Antwort des Servers eintrifft. Diese Funktion enthält als Parameter die Daten, die das Skript zurückliefert; was mit ihnen geschehen soll, steht im Funktionsrumpf.
In unserem Beispiel ist es

HTML: 
<div id="ausgabe"></div>

Jetzt fehlt noch das PHP-Skript. Das Skript muss die per GET übertragenen Daten entgegennehmen und darauf basierend Inhalte zurückliefern.

PHP: 
<?php
      if((isset($_GET["wahl"])) && ($_GET["wahl"] == "Brasilien")) {
        $orte = array("São Paulo", "Rio de Janeiro",
                         "Belo Horizonte", "Porto Alegre",
                         "Brasília");
        echo ausgeben($orte);
     }
     else if((isset($_GET["wahl"])) && ($_GET["wahl"] == "Deutschland")) {
       $orte = array("Albstadt", "Aachen",
                         "Altena", "Altdorf bei Nürnberg",
                         "Bruchsal ");
       echo ausgeben($orte);
     }
     else if((isset($_GET["wahl"])) && ($_GET["wahl"] == "USA")) {
       $orte = array("New York City", "Nashville",
                         "Phoenix", "San Diego",
                         "Omaha ");
       echo ausgeben($orte);
     }
  
     function ausgeben($ort)
     {
       $str = "<ul>";
       foreach ($ort as $o) {
         $str .= "<li>$o</li>";
       }
       $str .= "</ul>";
       return $str;
     }
   ?>

Ich habe absichtlich nicht gleich aus der Datenbank bezogen, ich will dir hier ein Beispiel zeigen, eine Anleitung wo du nach gehen kannst. Klar bei fragen stehe ich gern zur Seite. Ich möchte nur nicht komplett den Code schreiben.

Gruß
 
Als erstes ein groooooosses Dankeschön an Lockcat! Mein Problem konnte gelöst werden.
Natürlich stelle ich nicht nur Fragen, ich liefere auch für euch alle die (meinige) Lösung.

Voraussetzung wie ich geschildert habe ist, man hat ein Array welches aus einer DB in einem Dropdown wiedergegeben wird.
Wenn man nun jedoch Zusatzinformationen aus der DB haben will, sobald der Benutzer sein Dropdown-Menü ausgewählt hat, kann man mit folgenden Code-Snippets die Zusatzinformationen wiedergeben.

index.php

Im <body> Bereich:

Javascript: 
<script>
$(function () {
     $('#id').change(function() {
       if($(this).val() != "") {
         $.get(
           "meineverarbeitendePHPseite.php",
           { wahl: $(this).val() },
           function(daten) {
             $('#ausgabemodul').html(daten);
           });
       }
     });
   });
</script>

An der Stelle vom Dropdown das generiert wird

PHP: 
echo "<select id='id' name='id'id='id' class='form-control form-control-sm' required='true' >";
    $result = $con->query($sql);
    if($result->num_rows >0 ) {
        while($row = $result->fetch_assoc()) {
            $id = $row['id'];
            $mydropdown = $row['meine_PHP_MYSQL_FELDER'];
?>
        <option value="<?=$row["id"]?>">  <?=$row["MEIN_MYSQL_FELD"]?></option>
    <?php
            }
        }
    ?>
    </select>


Meine PHP Seite, welche die Zusatzinfos aus der DB holt. Muss gleich heissen wie im JavaScript
$('#ausgabemodul').html(daten);
Somit ausgabemodul.php

PHP: 
// Wenn im Dropdown ein "punkt" gewählt wurde, werden die Detailangaben ausgelesen
if(isset($_GET["wahl"])) {
    $ID = $con->real_escape_string($_GET['wahl']);
    $query = "SELECT
              *
              FROM
                  tabelle
              WHERE id = '".$ID."'  ";
    $res = mysqli_query($con, $query) or die('-1'.mysqli_error());
    while( $OBJ = mysqli_fetch_array( $res ) ) {
        echo 'Überschrift: '.$OBJ['Zusatzfeld_aus_DB'].'<br>';
        }
       
    }


Herzlichen Dank an Lockcat....
Enjoy and let's programming.......
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück