Overview
Dieses Tutorial erklärt, wie man eine dynamische Dropdown-Liste in Chronoforms8 implementiert, bei der sich die Optionen basierend auf Änderungen eines anderen Feldes aktualisieren. Es behandelt das Einrichten eines Ereignisauslösers, das Konfigurieren eines erweiterten Listeners in der Dropdown-Liste und das Erstellen einer separaten Seite mit einem PHP-Skript, das neue Optionen im JSON-Format liefert. Der Prozess stellt sicher, dass sich die Dropdown-Liste mit neuen Daten, wie einer zufälligen Liste von Hauptstädten, aktualisiert, sobald sich der Wert des auslösenden Feldes ändert.
Eine dynamische Dropdown-Liste ist ein Auswahlfeld, das seine Optionen aktualisiert, wenn sich ein anderes Feld ändert. In diesem Tutorial zeigen wir, wie man dies in Chronoforms8 macht.
Zuerst müssen wir einen Ereignisauslöser in dem Feld einrichten, der die Änderung der Optionen auslösen wird:
Wir richten einen Auslöser namens "reloadoptions" ein, wenn sich der "Wert ändert" unseres Feldes.
Dann müssen wir in unseren Dropdown-Einstellungen einen erweiterten Listener einrichten:
Der Auslösername sollte der sein, den wir zuvor eingerichtet haben "reloadoptions", die Aktion sollte "Optionen laden" sein und die Aktionsparameter sind der Alias der Seite, die die neuen Optionen liefern wird. In unserem Fall haben wir eine Seite namens "options".
Jetzt müssen wir die "options"-Seite vorbereiten, um die "Optionen laden"-Anfrage zu empfangen und die Ergebnisse im richtigen Format zurückzugeben:
Wir haben eine neue Seite hinzugefügt und den Alias auf "options" und die Seitengruppe auf "options" gesetzt. Es ist wichtig, die Seitengruppe auf etwas Einzigartiges im Formular zu ändern, damit die Seite unabhängig aufgerufen werden kann.
Im Lade-Ereignis der Optionsseite haben wir eine PHP-Aktion, um die Ergebnisse zurückzugeben:
In unserem Fall haben wir ein PHP-Skript, das eine zufällige Liste von Hauptstädten zurückgibt:
$cities = [
"New York", "London", "Tokyo", "Paris", "Sydney",
"Toronto", "Berlin", "Rome", "Shanghai", "Istanbul",
"Mumbai", "São Paulo", "Mexico City", "Cape Town", "Buenos Aires",
"Moscow", "Singapore", "Los Angeles", "Bangkok", "Jakarta"
];
// Mische das Städte-Array, um die Reihenfolge zu randomisieren
shuffle($cities);
// Extrahiere 5 zufällige Städte
$randomCities = array_slice($cities, 0, 5);
// Erstelle ein Array von Schlüssel-Wert-Paaren
$randomItems = [];
foreach ($randomCities as $city) {
$randomItems[] = [
'text' => $city,
'value' => $city
];
}
// Gib das Ergebnis als JSON aus
echo json_encode($randomItems, JSON_PRETTY_PRINT);Beachten Sie, dass die Liste JSON-kodiert ist und es sich um ein Array von Arrays handelt. Jedes innere Array ist eine Option und hat 2 Schlüssel: "text" für den Optionstext und "value" für den Optionswert.
Das ist alles. Wenn sich nun das auslösende Feld ändert (bei Wertänderung), erhält die Dropdown-Liste den Auslöser und ruft die "options"-Seite auf, um die aktualisierte Liste der Optionen zu erhalten.
Comments: