JQuery: Select-Boxen mit Ajax befüllen
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.
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.
<?php 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.
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!
Ich nochmal :>
die Demo funktioniert leider auch nicht !?
Und zum 3. mal 😉
Funktioniert doch alles .. vielen Dank !
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?
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).
Beim jQuery Code Beispiel fehlt noch das ende von document ready.
});
Deswegen is es n bißchen sucherei bis man es hinbekommt.
Danke für den Hinweis, ist gefixt 😉
Danke für dein tut 🙂
also ich habs versucht und es klappt nicht.
kannst du nicht einfach die demo auch als download anbieten?
Funktioniert super, aber leider werden Umlaute falsch dargestellt? Vielleicht gibt es ja eine kurze Hilfestellung.
lg
Dieter
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
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
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?
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
Vielen Dank Dennis, ich habe Dir gerade meine Testdatei geschickt.
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!
hey Jason,
thx 😉
do you deleted your cache? try this, it’s my first intention…
best,
Dennis
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
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 😉
Hey Hallo!
Habe versucht das Beispiel nachzubilden. Leider klappts nicht. Stimmt der HTML Code so:
pos1
pos2
pos3
Danke schon mal…
ahh mist hier wird der html code nicht dargestellt…
[form]
[select id=“selectbox1″]
[option value=“1″]pos1[/option]
[option value=“2″]pos2[/option]
[option value=“3″]pos3[/option]
[/select]
[select id=“selectbox2″][/select]
[/select]
[/form]
Ich habe die Klammern getauscht in der Hoffnung das es so angezeigt wird.
Funktioniert das irgendwie auch mit optgroups?
Wenn ich die einfüge bekomme ich den WErt undefined zurück
Hi,
super Beispiel, leider funktioniert es nicht bei mir. In der zweiten Select-Box werden alle Werte angezeigt.
Die JQuery-Dateien: jquery.chili-2.2.js und jquery.js
sind eingebunden und im Ordner vorhanden.
Was mache ich falsch?
Wäre es viel verlangt, wenn Du mir den ganzen Code zukommen lässt? Danke im Voraus.
Hey,
der ganze Quellcode steht eigentlich schon da. Also da gibt es nicht viel mehr. Das Chili-Plugin benötigst du eigentlich nicht, das ist nur zur „hübschen“ Darstellung des Sources. Du kannst mir aber gerne deinen Source per E-Mail schicken und dann gucke mal über den Quellcode.
Viele Grüße
Super Tutorial/Beispiel!!
bin neu, was ajax angeht, aber dieses war genau, was ich gesucht habe, und es funktioniert auf Anhieb, wenn man ein bischen ahnung von html und js hat…
DANKE!
Was muss denn von PHP ausgegeben werden?
Banane
usw.
Schön wäre mal ein Besispiel in PHP
Danke schon mal
Gruß Markus
ich hatte eine Besipiel im PHP code mit eigefügt.
Leider kann es aber nicht dargestellt werden
ich versuche es mal so
option value=“banane“>banane</option
usw.
Hey Markus,
der Quellcode wurde bei diesem Artikel leider nicht (mehr) richtig angezeigt. Ich habe es korrigiert und nun sollte auch etwas PHP zu sehen sein 😉
Viele Grüße,
Dennis
Hallo Dennis,
ich stand ehrlich gesagt auch etwas auf dem Schlauch, habe mir dann aber einfach mal den gesamten Quelltext Deiner Demo kopiert plus ein selectboxen.php angelegt (auch einfach kopiert).
Fazit: Es geht wirklich supergut, nur darf aus Deinem Quellcode offenbar folgendes nicht verschwinden:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.1");
</script>
Was hat es denn damit auf sich und weshalb weist Du nicht darauf hin?
Hallo Volker,
das Einbinden des Jquery-Frameworks ist natürlich elementar. Die Variante Jquery via Google einzubinden, habe ich in einem anderen Artikel erklärt, den du hier sehen kannst: http://www.blogrammierer.de/jquery-jquery-via-google-einbinden/
Ich habe nicht daraufhin gewiesen, da ich beim Verfassen des Artikels davon ausgegangen bin, dass, wenn jemand nach Jquery-Fragen sucht, auch grundlegende Mechanismen des Frameworks kennt. So auch, dass das Framework zunächst auf jeder Webseite eingebunden werden muss, um es verwenden zu können.
Also wenn du Jquery-Snippets verwenden möchtest, muss immer erst Jquery eingebunden werden und das kann man auf unterschiedliche Arten machen. Viele Wege führen bekanntlich nach Rom 🙂
Viele Grüße,
Dennis
Danke für das Beispiel, genau danach hatte ich gesucht!
Gibt es noch einen einfach umzusetzenden Trick, wie man die 2. Selectbox deaktivieren kann, solange man in der 1. noch nichts ausgewählt hat? Mir schwebt da so eine Darstellung wie z.b. bei mobile.de vor.
Hey Stefan,
da gibt es einen Trick. Du könntest z.B. beim Laden des Javascriptes (in der ready-Fkt) die zweite SELECT-Box deaktiveren:
$("#selectbox_2").attr("disabled","disabled");
.Diese SELECT-Box muss dann wieder aktiviert werden, wenn du die Daten in die SELECT-Box geladen hast. Also z.B. nach Zeile 5 mit
$("#selectbox_2").attr("disabled","");
.Hoffe, das war das was du gesucht hast.
Dennis
Hallo!
Ich habe auch etwas länger gebraucht, damit das bei mir läuft.
Die Lösung lag in der selectboxen.php. PHP wird hier nur mit „<?" geöffnet, statt mit "<?php". Dies führte dazu, dass bei mir alle Werte angezeigt wurden.
Vieleicht hilft das einigen!
Hey Andy,
danke für den Hinweis. Der Beitrag ist schon etwas älter und in alten Versionen ging die Variante ohne „" immer noch problemlos. Der Beitrag ist jetzt aktualisiert. Viele Grüße und vielen Dank, Dennis
Hallo,
ich muss 2 Dropdownlisten aus ner Datenbank abgleichen wo die id der ersten ein Feld in der wzeiten ist us unterschiedlichen Tabellen ohne dass die Seite neu geladen wird.
könntest du mir Bitte ein beispiel senden habe in Ajax keinen Durchblick.
Hallo Wolfgang,
dein Kommentar war leider in den Tiefen des Spam-Ordners verschollen.
Es steht für deine Anforderung eigentlich schon alles in dem Beispiel. Ein Ajax-Request und eine PHP-Datei, die die angeforderten Daten zurückliefert. Die PHP-Datei muss dann entsprechend deiner Anforderungen angepasst werden.
Gruß,
Dennis
Hallo
super Script. ist es auch Möglich das man einen Absenden-Button einblendet sobald bei beiden Select-Boxen eine auswahl getroffen wurde?
LG Mirko
Hey Mirko,
das ist durchaus möglich. In der „load“-Fkt kannst du als letzten Parameter eine Funktion angeben, die nach dem erfolgreichen AJAX-Call ausgeführt wird. In Bezug auf den Button sieht es dann in etwa so aus:
$(„#selectbox_2“).load(„selectboxen.php“,{value: id_hauptkategorie, function() {
$(„#hidden_input“).css(„display“,“block“);
}});
Viele Grüße,
Dennis
leider funktioniert der change eventhandler nicht mit dem IPad…
hat jemand da einen Tip?
Geht es evtl. mit der on-function besser? http://api.jquery.com/on/