Reset Conditional Dropdown Value When Previous Is Changed

Ask the community
,
1

I have 3 dropdowns that are connected to a dataset and conditionally rendered based on user selection. The first dropdown contains 2 options; the second dropdown only contains 1 option; the third dropdown contains 2 sets of 5 options.

The first dropdown is enabled on page load, the second and third dropdowns are not enabled until a selection is made in the preceding dropdown; kind of like a onChange cascade.

The problem I am having is that since the second dropdown contains only 1 option, when the user changes the selection in first dropdown the second dropdown only contains 1 option and cannot be changed so an onChange isn’t triggering the third dropdown to update.

I think I need to write a reset function that checks if the next dropdown has a value and clear it. I’m just not sure how to do this.

2

This is the reset function I have attempted to write in the first onchange event but with no success.

export function originVI_change ( event , $w ) {
// check if second dropdown has a value use selectedIndex to reset the
// dropdown value and run desinationDropdown() to populate options
if ( $w ( “#destinationVI” ). value != “” ) {
destinationDropdown ();
$w ( “#destinationVI” ). selectedIndex = - 1 ;
}
// if the second dropdown has no value then run destinationDropdown() to
// populate options and enable the dropdown on page
else {
destinationDropdown ();
$w ( “#destinationVI” ). enable ();
}
}

3

I’m not quite sure what you are trying to accomplish. Perhaps the Cascading Form example can help you work this out.