Selectbox mit Prototype per Ajax befüllen

16. Dezember 2008 von

prototypeIch 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:

 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.

Dir gefällt dieser Beitrag?
Erhalte Updates. Kostenlos.

4 Kommentare

  • Hi, thnx for this nice script!!
  • Genau das hab ich gesucht, danke.
  • Muchas gratias, it works perfekt!

Was denkst du?