Ich weiß, dass ähnliche Fragen gestellt wurden, aber ich habe keine Lösung gefunden.
Ich habe eine Beispielgeige mit einigen meiner bekannten Jahre, Monate und Tage als Beispiel. Anstatt manuell Optionsdivs für jedes Jahr hinzuzufügen, möchte ich, dass die div-ID basierend auf dem Wert des ausgewählten Jahres usw. dynamisch gefüllt wird.
Ich habe alle Dropdown-Option Werte aus meiner Datenbank (PHP, MySQL, CakePHP 1.3). Das erste Dropdown enthält eindeutige Jahre, in denen Berichte eingegeben wurden. Einmal ausgewählt (onchange), gibt das zweite Dropdown-Feld nur eindeutige Monate an, in denen Berichte für das ausgewählte Jahr erfasst wurden. Sobald ein Monat ausgewählt ist (onchange), wird ein drittes Dropdown-Feld mit den Daten jedes Tages, an dem ein Bericht eingegeben wurde, ausgefüllt. Berichte begannen im August 2011 und wurden seither nicht jeden Monat oder jeden Tag eingegeben.
Brauchen Sie Hilfe mit meinem Ajax um ausgewählte Option aus der ersten Dropdown-Liste zu meinem Controller zu posten, dann erhalten Sie zweite Dropdown-Optionen von neuen Abfrage zu db (Modell) basierend auf dem gebuchten Wert. Angenommen, der Benutzer wählt 2013 aus dem ersten Dropdown-Menü aus, dann sendet ajax "2013" in einer Variablen an meinen Controller, der Controller sendet den Wert an mein Modell und mein Modell fragt die Datenbank ab, um innerhalb von 2013 verschiedene Monate zu erhalten. Und da das Jahr noch nicht vorbei ist, sollten die Monate Januar bis Juli erscheinen. Diese füllen meine Dropdown-Liste für die Monate und der Benutzer wählt May als Beispiel aus. Ajax sendet Mai oder "05" an den Controller - & gt; Modell und Modell fragt die Datenbank ab, um im Mai 2013 eindeutige Tage zu erhalten. Dies füllt mein drittes Dropdown-Menü. Ich habe ein verstecktes Eingabefeld, das alle ausgewählten Werte aus den Dropdowns in diesem Format enthält: MM / TT / JJJJ. Wenn der Benutzer einen Antrag einreicht, leitet er die Berichtseite für dieses Datum um und zeigt alle an diesem Tag eingegebenen Datensätze an.
Danke für Ihre Hilfe ...
%Vor%- Dies ist meine jQuery, aber es funktioniert nicht ... die $ .get benötigt, um den Wert von meinem Modell zu bekommen, Index nur iframes eine neue Iteration meiner Seite.
%Vor%- Hier ist mein aktueller Formularauszug aus der Ansicht "index" in CakePHP 1.3
%Vor%Was Sie tun sollten, ist:
Fügen Sie Änderungsereignisse zu jedem Dropdown-Feld hinzu - oder zumindest die ersten beiden.
Bei einem Änderungsereignis wird ein AJAX-Aufruf an den Server gesendet (einige params werden übergeben) und die nächste Auswahlbox wird erneut mit den vom Server zurückgegebenen Werten gefüllt. Der "Trick" hier ist, dass Sie sich allein überlegen müssen, wie Sie die Parameter (GET, POST) übergeben und wie Sie das selectbox HTML erstellen.
Nachdem der AJAX-Aufruf die Daten vervollständigt und zurückgegeben hat, müssen Sie die nächste Auswahl auffüllen. Hier können Sie entweder den Server veranlassen, HTML für die Selects zu senden oder die Daten abzurufen und die Markup-Client-Seite zu erstellen. Es sollte besser sein, den HTML-Code vorrendered zu lassen.
Wiederholen Sie den Vorgang für das nächste Dropdown-Menü.
Es gibt keine Notwendigkeit für mehrere Ajax-Anrufe. Sie können alle Daten für die Berichte abrufen. Und bearbeiten Sie die Dropdown-Client-Seite.
Ich werde keinen Code bereitstellen. Es ist leicht zu kodieren, aber Sie müssen die Daten für Sie ändern, und das wird einige Zeit dauern.
Ich werde Borislavs Antwort ein wenig erweitern, wenn ich darf, indem ich Ihnen ein Konzept zur Verfügung stelle.
Die Methode, die Borislav beschreibt, ist genau richtig und IMHO ist eine gute Antwort, die der Prämie würdig ist. Ich habe dies mit Erfolg verwendet, aber es ist nicht intuitiv für Benutzer und ist nicht Touchscreen-freundlich, die jede neue Anwendung wirklich sein muss.
Ein Fehler, den es zu vermeiden gilt: Wenn Sie einen Formular-Post verwenden (statt die Tropfen mit JS zu lesen), müssen Sie die leeren s beim Laden der Seite mit einbeziehen oder Sie werden sehr schwer erkannt. Es ist in Ordnung, sie durch andere mit dem gleichen Namen zu ersetzen, aber ein zuverlässiges Hinzufügen neuer Formularelemente ist ein Ärger, den Sie nicht brauchen.
%Vor%funktioniert gut, wie auch:
... Wählen Sie zuerst aus dem Jahr
Ihre myajax Funktion ersetzt nur die 2span.innerHTML = was auch immer Ihr php gesendet hat ...
Ich schlage jedoch vor, dass Sie die Lösung stattdessen auf eine grafische Benutzeroberfläche erweitern. Die einfachste Version wären Knöpfe für Jahr, Monat und Datum. HTML5 hat sogar die Fähigkeit, sie dynamisch für Sie zu zeichnen. Sie können Ihren Ajax verwenden, um Schaltflächen auszublenden oder auszublenden, die für eine bestimmte Jahresauswahl nicht gültig sind. Es ist so einfach, eine Menge Code für Schaltflächen als Select-Anweisung zurückzugeben. Setzen Sie onClick = 'myajax (\ "whatever \"), wenn Sie die Schaltflächen generieren.
Ich hatte eine ähnliche Situation, ich glaube, dass Sie basierend auf den Werten aus der Datenbank Monate und Tage auswählen müssen, können Sie PHP-Funktion date zum Beispiel <option> echo date(d,Var) verwenden - nehmen wir an, dass die Variable das Datum ist aus der Datenbank war = 01/05/2013, in diesem Fall ist die Option "01", und im Falle des Monats verwenden <option> echo date(F,Var) in diesem Fall ist die Option "Mai" und so für das Jahr.
Bereiten Sie eine Abfrage vor, um alle Berichtdaten aufzulisten, und wählen Sie sie dann aus der Abfrage aus, und füllen Sie sie in Ihre Auswahl.
Überprüfen Sie die PHP-Datumsfunktion .
Dies ist der aktuelle JSFiddle
Ich habe viele ähnliche Lösungen gemacht. Eine sehr gute Idee ist es, die in Variablen gewählten Daten zu speichern. Wenn Sie also eines der Felder ändern, wird die entsprechende Variable mit dem gewählten Wert aktualisiert. Beim Ändern einer der Auswahlboxen werden alle anderen über Ajax separat aktualisiert, wobei alle Variablen als Hash gesendet werden. Dies löst viele Probleme mit dem, was bei separaten Selects aktualisiert wird.
Es gibt kein Problem, wenn der Benutzer in die "richtige" Richtung geht, ein Problem tritt auf, wenn er "zurück" geht ... Oben löst das.
Tags und Links javascript jquery php ajax cakephp-1.3