Selectbox mit Prototype per Ajax befüllen

Nico — Tue, 16 Dec 2008 17:22:49 +0000

Ich habe gestern mit einem Kollegen versucht, eine Selectbox mit dem Javascript-Framework Prototype per Ajax zu füllen. Mit jQuery – was wir in letzter Zeit mehr einsetzen – keine grössere Sache. Mit Prototype aber mussten wir etwas grübeln. Da ich in Google nicht wirklich fündig geworden bin, gibt es hier nun ein Beispiel. (Und ich kann gleich das Syntax-Highlighting in WordPress testen :-)

Es soll anhand des Wertes einer Select-Box Daten per Ajax von einem PHP-Script geladen und in eine zweite Select-Box als Optionen hinzugefügt werden.

Zuerst benötigen wir zwei Select-Boxen:


Kategorie


Artikel

Das Javascript (Prototype muss eingebunden sein):

Und hier noch das PHP-Script als Beispiel:


/**
 * Artikel-Array, wuerde im echten Leben aus
 * einer Datenbank kommen.
 */
$artikel_data = array
(
  1 => array
      (
        array("id" => 1, "name" => "Artikel Nummer 1"),
        array("id" => 2, "name" => "Artikel Nummer 2"),
        array("id" => 3, "name" => "Artikel Nummer 3"),
      ),
  2 => array
      (
        array("id" => 4, "name" => "Artikel Nummer 4"),
        array("id" => 5, "name" => "Artikel Nummer 5"),
        array("id" => 6, "name" => "Artikel Nummer 6"),
      ),
  3 => array
      (
        array("id" => 7, "name" => "Artikel Nummer 7"),
        array("id" => 8, "name" => "Artikel Nummer 8"),
        array("id" => 9, "name" => "Artikel Nummer 9"),
      ),
);

/**
 * Als Json ausgeben
 */
if($_GET['kategorie'])
{
  echo json_encode($artikel_data[$_GET['kategorie']]);
}

Hier das gesamte Beispiel. Viel Spass! Wenn jemand eine schnellere Lösung hat, nur her damit.

No related posts.

Stetix » prototype

Selectbox mit Prototype per Ajax befüllen