Selectbox mit Prototype per Ajax befüllen

prototype Selectbox mit Prototype per Ajax befüllenIch 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:







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.


4 Kommentare to “Selectbox mit Prototype per Ajax befüllen”

  1. Rene sagt:

    Muchas gratias, it works perfekt!

  2. Pepel sagt:

    Genau das hab ich gesucht, danke.

  3. funktioniert super … Danke

  4. Elias sagt:

    Hi, thnx for this nice script!!

Schreibe jetzt einen Kommentar zu diesem Artikel: