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.

22 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

  14. Svenja sagt:

    Das ist genau das was ich suche aber ich kriegs auch nicht eingebaut :(

    Fehler: jQuery is not defined
    Quelldatei: …./js/jquery.js
    Zeile: 704

    Fehler: ChiliBook is not defined
    Quelldatei: …../pages/account.html?tab=set
    Zeile: 145

    und

    Fehler: $ is not defined
    Quelldatei: …./pages/account.html?tab=set
    Zeile: 151

    Was mach ich falsch?

  15. Dennis S. sagt:

    Hey Svenja,

    hast du die JQuery-Dateien wirklich so in deinem Quellcode eingebunden, wie sie dort oben stehen?

    Wenn du möchtest, kannst du mir mal deine Dateien per Mail an info@blogrammierer.de schicken. Ich würde dann mal drauf schauen ;)

    viele Grüße,
    Dennis

  16. Svenja sagt:

    Vielen Dank Dennis, ich habe Dir gerade meine Testdatei geschickt.

  17. [...] versucht JQuery: Alle Checkbox bei Klick auf einer Checkbox markieren Jedoch wenn ich wie hier JQuery: Select-Boxen mit Ajax befüllen | BLOGRAMMIERER den PHP code nehme zum testen übergibt er klein $_POST["value"]. [...]

  18. jason sagt:

    Hey, thnx for this nice script!!

    Its workin well for all browsers, but i cant get it workin in IE :( But in your DEMO its workin well in IE! why :S

    Hope you can give me some tipps..

    Thank you!

  19. Dennis S. sagt:

    hey Jason,

    thx ;)

    do you deleted your cache? try this, it’s my first intention…

    best,
    Dennis

  20. Jason sagt:

    Hey Dennis,
    Ty for an fast intention, But it still does not work :( … did u use anything special in php file or ajax part of the html-page, which is not included in the download file? i am so stucky at that point… lol :(

    Ty,
    Jason

  21. Dennis S. sagt:

    Hey Jason,

    i didn’t use anything special in my PHP/HTML-File. Maybe you can send me
    your source-files and I take a look?!
    It’s quite difficult to analyse code which I can’t see ;)

Leave a Reply

Twitter Delicious Facebook Digg Stumbleupon Mister Wong Technorati Favorites More