Hi i have tried to use the example to create a cascading form, it partially works but i cannot get a different choice from the first dropdown to render options in the second dropdown.
I have used family relationships as an example here. If i select Father in the first dropdown then the options might include, father or dad but they will only show options based on selection for a mother?
Dropdown 6 is the first dropdown on the page
Dropdown 7 is the send based on the selection made in dropdown 6
import {myMother, myFather} from ‘public/personalRelationshipTerm’;
$w.onReady( function () {
$w(’ #dropdown7 ‘).options = myMother;
$w(’ #dropdown6 ‘).onChange(() => {
if ($w(’ #dropdown6 ‘).value === ‘mymother’) {
$w(’ #dropdown7 ‘).options = myMother;
$w(’ #dropdown7 ‘).placeholder = ‘What did you call your Mother’;
$w(’ #dropdown7 ‘).enable();
}
else if ($w(’ #dropdown6 ‘).value === ‘MyFather’) {
$w(’ #dropdown7 ‘).options = myFather;
$w(’ #dropdown7 ‘).placeholder = ‘What did you call your Father’;
$w(’ #dropdown7 ‘).enable();
}
else {
$w(’ #dropdown7 ‘).value = ‘’;
$w(’ #dropdown6 ').disable();
}
});
});
The public file looks like this
-
export const myMother = [
-
{value:“”, label: “What did you call your Mother?”},
-
{value:“myMother”, label: “My Mother”},
-
{value:“Mother”, label: “Mother”},
-
{value:“Mum”, label: “Mum”},
-
{value:“Mom”, label: “Mom”},
-
{value:“myMummy”, label: “My Mummy”},
-
];
-
export const myFather = [
-
{label: “What did you call your Father”, value: “”},
-
{label: “My Father”, value: “myFather”},
-
{label: “Father”, value: “father”},
-
];
It’s annoying because there is probably something quite simple that needs to be added or removed but i can’t see what?
Thanks Adam
it took me a while to get there