RSS Feed
Twitter
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.
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
[...] ist evtl. was für dich: JQuery: Select-Boxen mit Ajax befüllen | BLOGRAMMIERER ansonsten -> [...]
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.
[...] 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"]. [...]
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,
… 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 for an fast intention, But it still does not work
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