JQuery: Select-Boxen mit Ajax befüllen

WP Greet Box icon
Hallo! neu hier? Dann abboniere doch den RSS feed, um immer auf dem aktuellsten Stand bleibst.
Beispiel

Beispiel

Sobald Select-Boxen eine große Anzahl an Optionen haben geht die Übersicht und die Bedienbarkeit verloren. Ebenfalls kann es vorkommen, dass die möglichen Optionen von Select-Boxen von vorher ausgewählten Select-Boxen abhängig sind. Somit wäre es schön, wenn an der ersten Select-Box z.B. eine Hauptkategorie ausgewählt wird und die zweite Select-Box für Unterkategorien dynamisch auf Grund der vorher ausgewählten Hauptkategorie gefüllt wird.

Demo

Hier kommt JQuery mit seinen AJAX-Möglichkeiten ins Spiel.

1
2
3
4
5
6
7
8
<script type="text/javascript">
  $(document).ready(function() {
      $("#selectbox_1").change(function(){
        var id_hauptkategorie=$(this).children('option:selected').val();
        $("#selectbox_2").load("selectboxen.php",{value: id_hauptkategorie});
      });
  });
</script>

Als Erstes wird der Select-Box zum Auswählen einer Hauptkategorie (“#selectbox_1″) beim onChange die nachfolgenden Funktion zugewiesen. In Zeile 4 wird der aktuelle Status der Hauptkategorie-Wahl in einer Variablen (“value”) gespeichert.

In der fünften Zeile erfolgt dann der eigentliche Aufruf bzw. das Füllen der zweiten Select-Box (“#selectbox_2″). Es wird die Select-Box mit der ID “#selectbox_2″ mit dem Inhalt aus dem Aufruf der PHP-Seite “selectboxen.php” gefüllt. Als Parameter wird der PHP-Seite die Variable “value”, die als Inhalt die ID der Hauptkategorie hat, übergeben.

Die PHP-Seite liefert dann abhängig des übergebenen Parameters unterschiedlichen HTML-Quellcode zurück, der dann in der zweiten Select-Box angezeigt wird.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?
  if($_POST["value"]==1){
?>
    <option value="1">Auto</option>
    <option value="2">LKW</option>
    <option value="3">Motorrad</option>
<?  }
elseif($_POST["value"]==2){
?>
    <option value="1">Banane</option>
    <option value="2">Apfel</option>
    <option value="3">Erbse</option>
<?
}else {
  ?>
    <option value="1">PC</option>
    <option value="2">Laptop</option>
    <option value="3">MAC</option>
<?
}
?>

Die PHP-Seite kann natürlich den eigenen Bedürfnissen angepasst werden und mit notwendigen Datenbankabfragen etc. aufgebohrt werden. Das Grundprinzip zum dynamischen Laden von Selectboxen sollte aber mit diesem Beispiel recht gut verdeutlich werden.

You can leave a response, or trackback from your own site.

14 Kommentare to “JQuery: Select-Boxen mit Ajax befüllen”

  1. Fabian sagt:

    Hi,

    ich bekomme dein Beispiel einfach nicht umgesetzt :(

    Könntest du mir mal den kompletten code der Seite schicken in der die Form und der Javascript Code steht ??

    Vielen Dank im voraus, übrigens auch für die tolle Page!

  2. Fabian sagt:

    Ich nochmal :>
    die Demo funktioniert leider auch nicht !?

  3. Fabian sagt:

    Und zum 3. mal ;)

    Funktioniert doch alles .. vielen Dank !

  4. Markus sagt:

    Hallo,

    leider geht bei mir die Demo auch nicht!?!

    Ich bin auf der Suche nach genau so einem JQuery Plugin und würde gerne ein vorhandenes php script auf AJAX anpassen.

    Ggf. würde ich das auch gerne machen lassen, besteht Interesse?

  5. Dennis S. sagt:

    Vielen Dank für den Hinweis, dass die Demo nicht funktioniert. Die Demo sollte nun wieder laufen.

    Gerne kann ich auch ein vorhandenes Script auf AJAX anpassen, melde dich einfach per Mail bei mir (info{ät}blogrammierer.de).

  6. Maru sagt:

    Beim jQuery Code Beispiel fehlt noch das ende von document ready.

    });

    Deswegen is es n bißchen sucherei bis man es hinbekommt.

  7. Dennis S. sagt:

    Danke für den Hinweis, ist gefixt ;)

  8. Domi sagt:

    Danke für dein tut :)

  9. [...] ist evtl. was für dich: JQuery: Select-Boxen mit Ajax befüllen | BLOGRAMMIERER ansonsten -> [...]

  10. peter sagt:

    also ich habs versucht und es klappt nicht.

    kannst du nicht einfach die demo auch als download anbieten?

  11. dieterd sagt:

    Funktioniert super, aber leider werden Umlaute falsch dargestellt? Vielleicht gibt es ja eine kurze Hilfestellung.
    lg
    Dieter

  12. Dennis S. sagt:

    Hallo Dieter,
    das mit den Umlauten kann unterschiedliche Gründe haben. Entweder sind die Daten schon in deiner Datenquelle (Datenbank) falsch codiert oder es wird in deinem Skript (z.B. PHP-Skript) falsch encodiert. Vllt hast du noch mehr Infos? Gerne auch per E-Mail… ;)

    Viele Grüße,
    Dennis

  13. Hallo Dennis,

    danke für den Beitrag, hatte bisher immer alle Requests umständlich per

    $(‘#drückmich’).click(function(e){
    var whatever = $(“#blub”).attr(‘value’);;
    $.ajax({
    type: “POST”,
    timeout: 7000,
    data: {bla: whatever},
    url: “RufMichAufPerPostUndIchAntworte.php”,
    success: function(data) {…

    …usw.

    verarbeitet. Da bin ich vermutlich auf einer alten jquery-Version hängengeblieben.

    $(“#selectbox_2″).load(“selectboxen.php”,{value: id_hauptkategorie}); }

    ist dagegen ja mal sehr elegant…

    Danke

    Michael

Leave a Reply

Twitter Delicious Facebook Digg Stumbleupon Mister Wong Technorati Favorites More