Mehrere verknüpfte Select Felder aus Datenbank

MathiasP · 20. März 2014

Moin Moin,

zu meinem Problem:

Ich möchte gerne mehrere Select Felder, abhängig von den gewählten optionen, aus einer Datenbank laden...
Das heißt:

Select Feld 1 wird angezeigt:
Postleitzahl
- 65187
- 65203
- ...

Select Feld 2 erscheint (Namen, welche der PLZ zugeordnet sind

Nach Auswahl des Namens wird dann das nächste Select Feld gezeigt, wo man noch eine Auswahl treffen kann. z.B. Aktuelles Jahr des gewählten Namens

Nach den auswahlen wird dann zum Beispiel folgendes gezeigt:
Alle Veröffentlichungen des Jahres 2014 vom Author Michael Schmidt, welcher in der PLZ 65187 Wohnt...

Das Ganze will ich mit PHP und Ajay lösen (im Hintergrund steht eine MSSQL Datenbank)

Aktuell sieht mein Code so aus:

(die Datenbankanbindung lasse ich an der Stelle mal weg und setze statische Daten..)

Hauptseite.php

Code:

<script type="text/javascript">
<!--
function sendRequest() {
	var req;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
		new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		//Kein AJAX Support
	}
	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) { 
			document.getElementById('dropdown_name').innerHTML = req.responseText;
		}
	};
	var plz = document.getElementById('label_plz').value;
	req.open('POST', 'check.php', true);
	param = 'plz=' + plz + "&sendplz=1";
	req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	req.setRequestHeader("Content-length", param.length);
	req.setRequestHeader("Connection", "close");
	req.send(param); 
}
//-->
</script>

<span>Bitte PLZ wählen:</span><br><br>
<label for="label_plz">PLZ</label>
<select id="label_plz" name="plz" onChange="sendRequest()">
	<option value="0">-----</option>
<option value="1">65187</option>
<option value="2">65203</option>
</select>
		
		
<br><br>

<div id="dropdown_name">Hier erscheint das Dropdown für die auswahl des Namens</div>

die check.php, welche dann aufgerufen wird sieht so aus:
(das select menü wird anhand der Post Daten und einem passenden Query Befehl an die Datenbank dynamisch generiert)

Code:

	<label for="label_name">Name</label>
	<select id="label_name">
                         <option value="asd1">Name1</option>
                         <option value="asd2">Name2</option>
	</select>

ich finde leider keine Passenden Tutorials / ähnliche probleme im Netz und da ich nicht so Ajax erfahren bin wollte ich die Frage an euch richten...

Aktuell klappt es soweit, dass man eine PLZ im ersten Dropdown menü wählen kann und dann die dazugehörigen Namen in einem neuen Select Menü gezeigt werden. Jedoch fehlt da noch ein Dropdown menü und es werden auch noch keine Datensätze zu den gewählten optionen ausgegeben.

Ich hoffe, es war soweit verständlich erklärt.
Grüße Mathias

Parantatatam · 20. März 2014

Ich habe mal kurz etwas zusammen gebastelt (aber nicht getestet), was mit jQuery arbeitet und deinen Ansatz optimiert (kein Übertragen von HTML, sondern von JSON):

Javascript:

$(function() {
  var $postcode = $( "input#postcode" ),
      $name     = $( "input#name" ),
      $year     = $( "input#year" );
  
  $postcode.on( "change", function() {
    $.post( "check.php", { value: $( "option:selected", this ).val(), area: "postcode" }, function ( data ) {
      var $proto = $( "<option></option>" ), $el;
      
      $name.hide();
      $year.hide();
      $name.html( "" );
      $year.html( "" );
      
      $( data ).each(function ( index, option ) {
        $el = $proto.clone();
        $el.attr( "value", option.id );
        $el.val( option.value );
        $name.append( $el );
      });
      
      $name.show();
    }, "json" );
  });
  
  $name.on( "change", function() {
    $.post( "check.php", { value: $( "option:selected", this ).val(), area: "name" }, function ( data ) {
      var $proto = $( "<option></option>" ), $el;
      
      $year.hide();
      $year.html( "" );
      
      $( data ).each(function ( index, option ) {
        $el = $proto.clone();
        $el.attr( "value", option.id );
        $el.val( option.value );
        $year.append( $el );
      });
      
      $name.show();
    }, "json" );
  });
});

HTML:

<div>
  <label for="postcode">PLZ</label>
  <select id="postcode" size="1">
    <option value="0">-----</option>
    <option>65187</option>
    <option>65203</option>
  </select>
</div>
<div>
  <label for="name">
  <select id="name" size="1"></select>
</div>
<div>
  <label for="year">
  <select id="year" size="1"></select>
</div>

PHP:

$area  = array_key_exists( "area",  $_POST ) ? $_POST[ "area" ]  : false;
$value = array_key_exists( "value", $_POST ) ? $_POST[ "value" ] : false;

if ( !( $area || $value ) ) {
  header( "HTTP/1.1 422 Unprocessable Entity" );
  exit;
}

# Inhalt von $value maskieren, um SQL-Injections zu verhindern

switch ( $area ) {
  case "postcode":
    $cond = "postcode = '{$value}'";
    break;
  case "name":
    $cond = "name = '{$value}'";
    break;
  case "year":
    $cond = "year = '{$value}'";
    break;
  default:
    header( "HTTP/1.1 422 Unprocessable Entity" );
    exit;
}

$sql = "SELECT * FROM table WHERE " . $cond;

# SQL-Abfrage

# geladene Datensätze aus der Datenbank, Format:
# [
#   [ "id" => 1, "value" => "foo" ],
#   [ "id" => 2, "value" => "bar" ],
#   ...
# ]
$data;

echo json_encode( $data );

MathiasP · 20. März 2014

Erstmal danke für die schnelle Antwort.

Werde mich da mal durcharbeiten sobald ich Zeit habe und Feedback geben!!

Parantatatam · 20. März 2014

Okay, ich habe einige Schusselfehler übersehen, die ich jetzt ausgebessert habe:

Javascript:

$(function() {
  var $postcode = $( "select#postcode" ),
      $name     = $( "select#name" ),
      $year     = $( "select#year" );
  
  $postcode.on( "change", function() {
    $.post( "check.php", { value: $( "option:selected", this ).val(), area: "postcode" }, function ( data ) {
      var $proto = $( "<option></option>" ), $el;
      
      $name.hide();
      $year.hide();
      $name.html( "" );
      $year.html( "" );
      
      $( data ).each(function ( index, option ) {
        $el = $proto.clone();
        $el.val( option.id );
        $el.html( option.value );
        $name.append( $el );
      });
      
      $name.show();
    }, "json" );
  });
  
  $name.on( "change", function() {
    $.post( "check.php", { value: $( "option:selected", this ).val(), area: "name" }, function ( data ) {
      var $proto = $( "<option></option>" ), $el;
      
      $year.hide();
      $year.html( "" );
      
      $( data ).each(function ( index, option ) {
        $el = $proto.clone();
        $el.val( option.id );
        $el.html( option.value );
        $year.append( $el );
      });
      
      $year.show();
    }, "json" );
  });
});

HTML:

<div>
  <label for="postcode">PLZ</label>
  <select id="postcode" size="1">
    <option value="0">-----</option>
    <option>65187</option>
    <option>65203</option>
  </select>
</div>
<div>
  <label for="name">
  <select id="name" size="1" style="display:none"></select>
</div>
<div>
  <label for="year">
  <select id="year" size="1" style="display:none"></select>
</div>

Mehrere verknüpfte Select Felder aus Datenbank

MathiasP

Grünschnabel

Parantatatam

mag Cookies & Kekse

MathiasP

Grünschnabel

Parantatatam

mag Cookies & Kekse

Neue Beiträge