Select input abhängig von anderem select input

[AxlF]

Hallo,

ich entwickle gerade meine erste Extension. Jetzt bin ich auf ein Problem gestossen, bei dem ich mir nicht selbst helfen kann, da mir irgendwie das richtige Schlagwort fehlt.

Ich möchte ein Select Input abhängig von einem anderen machen.

Beispiel:

Im ersten select Input wird das Land ausgewählt,
dann soll der zweite select Input mit den jeweiligen Städten des Landes gefüllt werden.


Wie mach ich so etwas?
Hat jemand einen Tipp?

Viele Grüße,
AxlF

[xchs]

Du meinst so wie die Erweiterung [conditionalselectmenu] oder?

[AxlF]

Von der Beschreibung her klingt das super!

Leider finde ich nichts dazu wie ich das verwenden kann ...

[xchs]

Leider finde ich nichts dazu wie ich das verwenden kann ...

Im DCA kannst Du über den Schlüssel

'inputType' => 'conditionalselect' 

auf die Funktionen der Erweiterung zugreifen. In den beiden Erweiterungen [isotope] oder [MobileSwitch] ist das beispielsweise der Fall.

[AxlF]

Hm... okay...

Ich hab nun beide Erweiterungen installiert und mir den Quelltest angeschaut.... Ich denke ich habs einigermaßen kapiert - leider funktioniert es nicht.
Es liegt ein Fehler im Javascript vor - zumindest sagt das Firebug...

Gäbe es noch einen anderen Weg?

[xchs]

Es liegt ein Fehler im Javascript vor

Tatsächlich? Ein JavaScript-Fehler in der "conditionalselect.js" oder?

Die beiden von mir oben angesprochenen Erweiterungen hättest Du übrigens nicht unbedingt installieren müssen. Hab' die nur deshalb erwähnt, damit Du Dir anschauen kannst, wie dort im DCA auf diesen neuen Input-Typ zugegriffen wird. Dazu hätte es gereicht, die Archive der Erweiterungen runterzuladen und den Code anzuschauen.

[AxlF]

Also Firebug zeigt folgendes:

condit...lect.js (Zeile 33)

event is undefined
....parent.addEvent('change', function(event) { this.update(event.target) }.bind(th...

und die Zeile aus der js Datei vollständig

		
// Register event
this.parent.addEvent('change', function(event) { this.update(event.target) }.bind(this));

Ich hatte natürlich vorher die minified Version mit der src Datei ersetzt. Aber Anfangen kann ich leider damit nicht so viel... Mein JS ist nicht das beste :/


Die MobileSwitch Extension hatte ich noch installiert um an den Quelltest zu kommen, beim Isotope bin ich auf die Idee gekommen im Git Repository den Quelltext anzuschauen.

Im Prinzip wird ja aber nur der "inputType" Parameter wie von dir beschrieben auf "conditionalselect" gesetzt und im 'eval' Array der wert conditionField mit dem Feldnamen gefüllt.

Dann müsste ja schon was passieren - aber ausser Fehlermeldung kommt nix...

[xchs]

Wird denn im Seitenquelltext die Initialisierung über ein <script>-Element mit dem addEvent und "ConditionalSelect(...)" eingefügt?

[AxlF]

Ja, der wird generiert:

  <h3><label for="ctrl_City">City</label></h3>
  <select name="City" id="ctrl_City" class="tl_select"><option value="a">Augsburg</option><option value="b">Erlangen</option><option value="c">Hannover</option><option value="d">Wiesbaden</option></select>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	new ConditionalSelect('ctrl_City', 'ctrl_Country', JSON.decode('[{"value":"a","label":"Augsburg"},{"value":"b","label":"Erlangen"},{"value":"c","label":"Hannover"},{"value":"d","label":"Wiesbaden"}]'), JSON.decode('[null]'));
});
//--><!]]>
</script>

Ok - so ganz hab ichs noch nicht kapiert, wie genau ich den Wert aus dem ersten Input Feld abrufe. Ich gebe hier eigentlich nur ein Standard-Array aus der Callback-Funktion zurück.

Das Auswahlfeld zeigt aber nur den "-" vom eval wert 'includeBlankOption' => true ...

[xchs]

Ja, der wird generiert

Okay, alles klar. Ich müsste mir die ganze Sache auch erst näher ansehen, um hier Genaueres sagen zu können.

[AxlF]

Wie ist das eigentlich - wie kann ich den ausgewählten Wert des ersten Input Feldes dem callback-übergeben, oder im Callback auslesen?

Und mach ich die Einbindung eigentlich richtig? Oder hab ich was übersehen?