JQuery: Select-Boxen mit Ajax befüllen

Donnerstag, 12. März 2009 Dennis S.

X

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

Powered by WP Greet Box WordPress Plugin

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.

<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.

<?
  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.

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

Fabian sagt:

3. April 2009 um 09:12

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!
Fabian sagt:

3. April 2009 um 09:18

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

3. April 2009 um 12:50

Und zum 3. mal

Funktioniert doch alles .. vielen Dank !
Markus sagt:

20. Mai 2009 um 22:03

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?
Dennis S. sagt:

21. Mai 2009 um 11:39

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).
Maru sagt:

10. Juli 2009 um 16:47

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

});

Deswegen is es n bißchen sucherei bis man es hinbekommt.
Dennis S. sagt:

12. Juli 2009 um 22:21

Danke für den Hinweis, ist gefixt
Domi sagt:

9. Oktober 2009 um 07:53

Danke für dein tut
Reload einer Dropdownliste - php.de sagt:

14. Oktober 2009 um 18:00

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

25. November 2009 um 23:26

also ich habs versucht und es klappt nicht.

kannst du nicht einfach die demo auch als download anbieten?
dieterd sagt:

21. Dezember 2009 um 12:20

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

21. Dezember 2009 um 16:43

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
Dropdown-Input Wert auslesen und MySQL Abfrage machen - Fehler - AJAX (Asynchronous JavaScripting and XML) Forum sagt:

22. Februar 2010 um 20:28

[...] [...]
Michael aus Berlin sagt:

27. Februar 2010 um 23:39

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