Abhängigkeit von Selectboxen mit jQuery und Ajax
Für ein Projekt suchte ich nach einer Lösung, um eine zweite Selectbox in Abhängigkeit von der ersten Selectbox dynamisch zu füllen. Und das sollte unbedingt mit jQuery gehen, da ich jQuery in dem Projekt eh schon einsetzte. Ich habe auch einiges gefunden, aber jedes für sich hat nicht so funktioniert, wie ich es mir vorgestellt habe. Jetzt habe ich die Lösung und werde sie hier mal aufschreiben, falls einer das mal gebrauchen kann.
Nehmen wir mal an, die erste Selectbox wird aus der Datenbank mit Fahrzeugherstellern gefüllt. Die zweite Selectbox soll dann zum jeweiligen Hersteller die Typen listen.
Der HTML Quellcode sieht so aus:
<label for="hersteller">Hersteller</label>
<select name="hersteller" id="hersteller">
<option value="all">- alle -</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
</select>
<label for="typ">Typ</label>
<select name="typ" id="typ">
<option value="all">- alle -</option>
</select>
Der PHP Code, der die Typen zurückliefert:
if (isset($_GET['id']) && $_GET['id'] != 'all' ) {
$herst_id = (int)$_REQUEST['id'];
$json = array();
//Verbindung zur Datenbank herstellen...
$query = "SELECT typ_id, typ_name
FROM typ
WHERE hersteller_id = " . $herst_id ;
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
array_push($json, array(
'oV' => $row['typ_id'],
'oT' => $row['typ_name']
));
}
echo json_encode($json);
}
Achtung! Die Funktionen json_encode und json_decode stehen erst ab PHP 5.2 zur Verfügung.
Wir bekommen aus der ersten Selectbox den jeweilige Hersteller-Id und lesen dazu die Typen aus der Datenbank. Dieses stark vereinfachte Codefragment sollte jedem geläufig sein.
Nun der jQuery Part.
$(function() {
$('#hersteller').change(function(){
$.ajax({
url: ('seite_mit_dem_script.php'),
data: 'id=' + $(this).val(),
type: 'GET',
timeout: 2000,
dataType: 'json',
error: function() {
alert('Error loading json data!');
},
success: function(json){
var output = '';
for (p in json) {
output += '<option value=\"' + json[p].oV + '\">' + json[p].oT + '</option>\n';
}
$('#typ').html(output);
}
})
});
});
Sobald etwas aus der Hersteller-Selectbox ausgwählt wurde (change) wird ein Ajax Request mit der Hersteller ID gesendet und die Daten werden in die Typ-Selectbox reingeschrieben. Easy, oder?
- Kategorie: Programmierung
- Tags: ajax, javascript, jquery, json, php
- Kommentar-Feed | Trackback URL
- Gelesen: 6288 | Heute: 13
- einen Kommentar schreiben
10 Kommentare
Ich habe mir den Code etwas verändert.
Find’s so besser
jQuery
$(document).ready(function() {
$('#hersteller').change(function(){
$.ajax({
url: ('check.php'),
data: 'name=' + $("#hersteller").val(),
type: 'GET',
timeout: 2000,
dataType: 'json',
error: function() {
alert('Error loading json data!');
},
success: function(json){
var output = '';
for (p in json) {
output += '' + json[p].oT + '\n';
}
$('#typ').html(output);
}
})
});
});
PHP
$row['typ_id'],
'oT' => $row['typ_name']
));
}
echo json_encode($json);
}
?>
HTML
Hersteller
- alle -
Audi
Peugot
Typ
- alle -
Oh ich sehe gerade da is bei meinem post was schief gelaufen ^^
Wie hast du diese codeboxen gemacht?
Dann kann ich den code richtig posten.
Du mußt das HTML maskieren, schau mal den Quellcode der Seite an.
Hallo, das ist genau was ich suche. Gibt es auch ne Lösung für PHP 4? json_encode() ist ja erst ab PHP 5.2 wie Du schreibst.
Frage/Hinweis zum PHP-Code:
//Verbindung zur Datenbank herstellen...$query = "SELECT typ_id, typ_name
FROM typ
WHERE hersteller_id = " . $herst_id ;
$result = mysql_query($sql);
Muss statt ($sql) nicht eigentlich ($query) stehen?
Rico, mußt mal googeln, es gibt eine json Klasse für PHP4.
Ja. hast Recht. $query muß es heißen.
Hallo,
das ist genau das was ich suche. Leider bekomm ich den script nicht am laufen.
Ist es vllt möglich eine funtionierende zip datei zu schicken.
Wäre sehr dankbar
Fabrice
Sorry Fabrice, ich habe nichts mehr davon. Das Script ist schon etwas älter. vielleicht hilft
$(document).ready(function() { });um das Script herum statt
$(function() { });.Ich verzweifle gerade ich suche seit Tagen nach eine Function bzgl. der Steuerrung der zweiten select box…. hier hab ich es gefunden … eber es GEHT SO NICHT !!!
also
1) select box wie beispiel aufgebaut
2) JS einegefügt / jqery ist auch eingebunden …
3) php datei eingebunden und angepasstt es geht nicht!!!!
hieder der SQL Code:
if (isset($_GET['id']) && $_GET['id'] != 'all' ) {$herst_id = (int)$_REQUEST['id'];
$json = array();
//Verbindung zur Datenbank herstellen...
$sql = "SELECT * FROM region WHERE status='1' AND la_id='$herst_id'";
$result = $mysql->query($sql);
while ($r = $mysql->fetch_assoc()) {
array_push($json, array(
'oV' => $r['rg_id'],
'oT' => $r['region']
));
}
echo json_encode($json);
}
ich bekomme eine Meldung: “Error loading json data!” das bedeutet doch das keine Daten sind oder?
Andreas: ich hoffe, du hast PHP >5.2 wegen json_encode().
Ob Daten überhaupt aus der Datenbank kommen, kannst du ja mit var_dump($json) überprüfen.
Ich weiß nicht mehr, welche jQuery Version ich damals hatte, als ich den Beitrag geschrieben habe. Möglicherweise mußt du das Script auf die von dir verwendete jQuery Version anpassen.
also das geht auch bei mir nicht wegen json.