I have a component whose dialog has 2 colorfield in it. These colorfield are showing the color options from a ACS generic list using datasource node.
I want to modify this with:
when I select a color in the first colorfield, I want to show some colors in the swatch of the 2nd colorfield based on the selection of the 1st one.
1st pink--2nd black, white, yellow etc
1st green--2nd red, blue, teal etc
Solved! Go to Solution.
let citiesField = $(".cq-dialog").find("#cities"); In this line of your code, what is cq-dialog and cities? are these the properties "name" whose value we provide as ./valueHere?
@Shaheena_SheikhAre you calling that change function in dialog load as well?
$(".cq-dialog").find("#country").on("change", setCitiesOptions); // Onchane Event setCitiesOptions(); // Call the set options function on dialog load
If now calling setOptions function onload, try calling it.
It may be cache issue, it started working now. There's another issue, if i select one country in first field, then check the second field, it shows the correct options. Then again if select another option in the country, then the new cities option show up along with previous cities option. Rather than showing only new options, its appending old + new options. Now If i dont select anything in the second option and just save the dialog then reopen the dialog. This time if i check the second field again, i will only the new option, old ones will be gone. How can i make sure that everytime i make a change to the country the new option show up in the city instead of showing old +new option?