Ajax in Select-Feldern?

Von: , 10.04.2010 13:15 Uhr

Liebe/-r Experte/-in,

ich habe von Ajax nicht viel Ahnung. Das Ganze ist neu für mich. Mit Javascript bin ich auch nicht gerade befreundet - nur mit PHP.

Ich soll 3 Select-Option-Auswahlmenüs machen.
Beim Start werden die Daten (option-Tag) für die erste Box aus der Datenbank gelesen und angezeigt.

Beispiel: Planeten, Universen, Milchstraßen

Wenn man einen onChange macht, dann werden in der 2. Box die Daten für diese Box aus der Datenbank gelesen. Diese Daten sind abhängig vom gewählten Punkt in der Box 1.

Beispiel: Planeten -> Wasserplaneten, Feuerplaneten, Sandplaneten

Wenn man in der 2. Box einen onChange macht, dann sollen die Daten für das 3. Select-FEld aus der DB gelsen werden. Diese Daten sind abhängig vom gewählten Punkt in Box 2 und 1.

Beispiel: Planeten -> Wasserplaneten -> Erde, Mars, Planet X

wie realisiere ich das mit Ajax? Die (aktive im Browser geladene) Seite darf dazu nicht (wie mit PHP über den REQUEST) reloadet werden. Deshalb Ajax. Ein Initialisierungsscript für Ajax habe ich bereits.

Nur die Umsetzung meines Problemes und die Werteübergabe der Select-Boxen fehlt mir noch. Ich habe es bisher nicht geschafft die (wenigen verständlichen Tutorials im Netz) auf mein Problem anzuwenden.

Vielen dank für die Hilfe.

2 Antworten zu dieser Frage

Antwort von nach 2 Stunden 0 hilfreich

Re: Ajax in Select-Feldern?

Hi Markus,

wir verwenden immer das javascript framework jquery f. die ajax-kommunikation, d.h. du musst eine halbwegs aktuelle jquery-version einbinden, um das Bsp. nachzubauen. Also jquery bibliothek downloaden, auf deinem server ablegen und im html head z.B.:
<code>
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
</code>

Dann das simpelste Vorgehen:
den selectboxen id="..." verpassen, z.B. sel1, sel2, sel3.
das 1. select mit onchange="myAjaxSelect(this, 'sel2')" .
das 2. select mit onchange="myAjaxSelect(this, 'sel3')" .
Deine Javascript Funktion:
function myAjaxSelect(caller, dependantId) { ... }
kann mit jquery methoden recht einfach aus dem caller dessen id und aktuellen value auslesen. Wenn der caller sel2 ist, musst du noch sel1 referenzieren und dessen value auslesen. Wenn der caller hingegen sel1 ist, gibt's keinen sel2-Value. Die values von sel1 und sel2 kannst du dann wiederum sehr kompakt in einem aufruf an die Verarbeitungs-URL (dein PHP) senden und dessen Rückgabe auswerten, mit der jquery funktion $.ajax() .
Das PHP skript erkennt an den übergabeparametern, welche option-List gefordert ist (sel2 o. sel3), und gibt einfach den fertigen html-code (ohne select!) aus. Diese Ausgabe kann dann - wir sind wieder in $.ajax() - in die abhängige selectbox geschmissen werden: $('#'+dependantId).html(...);

Doku:
http://api.jquery.com/jQuery.ajax/
.. und immer schön mit firebug kontrollieren, was denn nun wirklich passiert im DOM-Tree. Was auf PHP-Seite passiert, solltest du von vornherein in eine Datei loggen, denn error outputs würden bei dieser implementierung nur bewirken, dass eine php-fehlerausgabe als innerHtml in eine selectbox injiziert wird - folgezustand undefiniert (invalid html).

Gruß
Thomas

Antwort von nach 2 Tagen 0 hilfreich

Re^2: Ajax in Select-Feldern?

hallo Thomas und danke erstmal.

ich versteh zwar die Grundidee, aber die Umsetzung krieg ich nicht hin.
Auf der jQuery-Seite blick ich auch das englsiche Fachchinesisch nicht und weiß auch nicht wonach ich da suchen soll oder wie ich da welche funktion anwende. Da steht soviel außen rum. Weiß gar nicht wo nach was gucken ... Habe von Ajax und Jquery sehr sehr wenig Ahnung.

* beim Aufruf von myAjaxSelect(this, sel2) ... ->> bezieht sich sel2 auf die vorherige oder die nachfolgende Select-box?
* wenn ich wüsste mit welchen methoden von jquery und wie man das ausliest wäre ich schon weiter
* bei der letzten box habe ich ja Bezüge zur 1. und zur 2. Box. Müsste es da nicht heißen myAjaxSelect(this, sel1, sel2) ...?
* wie sende ich denn mit jquery die Sachen nach php?
* und wie kriege ich sie zurück? einen $_REQUEST werde ich hier nicht haben, oder?

Ich habs bisher so:

<script language="javascript" type="text/javascript">

</script>
</head>
<body>
<form>

<select id="k1" name="k1" onChange="myAjaxSelect(this, 'k2')">
<?
$sql = "SELECT * FROM pta_k1 ORDER BY k1name";
$r = mysql_query($sql, $conn);
while ($d = mysql_fetch_array($r))
{
?>
<option value="<?=$d['k1']?>"><?=$d['k1name']?></option>
<?
}
?>
</select>

<select id="k2" name="k2" onChange="myAjaxSelect(this, 'k3')">
<?
$sql = "SELECT * FROM pta_k2 WHERE k1='".<Rückgabewert und id von k1>."' ORDER BY k2name";
$r = mysql_query($sql, $conn);
while ($d = mysql_fetch_array($r))
{
?>
<option value="<?=$d['k2']?>"><?=$d['k2name']?></option>
<?
}
?>
</select>

<select id="k3" name="k3">
<?
$sql = "SELECT * FROM pta_k3 WHERE k1='".<Rückgabewert und id von k1>."' AND k2='".<Rückgabewert und id von k2>."' ORDER BY k3name";
$r = mysql_query($sql, $conn);
while ($d = mysql_fetch_array($r))
{
?>
<option value="<?=$d['k3']?>"><?=$d['k3name']?></option>
<?
}
?>
</select>

Vielen Dank für die Hilfe

Jetzt auf diese Frage antworten.

Option select ajax select-box jquey

2 Antworten zu dieser Frage