You have been very helpful, Thanks!

Can you please explain the part how on adding objects to optionItems, those items are getting added in the node level in AEM. I mean code from JS is directly going to AEM node how? I dont see you pushing it anywhere in the node path

in console log the for look is showing only the new values.

yes clear() is added.

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 th...

I followed the complete solution but I am facinf a problem with the secod colorfield. Once I have selected a value in the first field, I am able to see the allowed values in the second field. But after i select a value in the second field and save the dialog box and then reopen it again, i am not ab...

let citiesField = $(".cq-dialog").find("#cities")[0]; In this line of your code, what is cq-dialog and cities? are these the properties "name" whose value we provide as ./valueHere?

I like this approach, I am trying to implement it in my colorfield. My first colorfield is using datasource from generic list while for the second one i will use your appraoch using json. That should work right?

I thought of this, but my only concern is, wont the servlet call make the actions taken in a dialog slow?

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 s...