Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

Cross dependency of drop-down field's entries?


Level 8


I have a set of fields, which has 2 fields in it (each set = 2 fields), the fields are Zone and Area.

Like that, i have 3 sets, in the same pattern, like below

Pattern location.jpg

(User can select US in the 1st set and in the 2nd/3rd set, no validation)

All are drop-down fields, these drop-down field's list box will be populated with entries from backend (ERP / SAP)

So, the 1st field Zone's list box entries are US, Europe and Asia.

The 2nd field Area's list box entries are New York, California, Houston, Germany, France,  Spain, China, Japan, Thailand.

Like this way, the list box entries will be populated from backend (ERP/SAP) when the form is rendered on the browser, well.

Now, my requirement is,

When the moment user selected the Europe entry on the 1st field/Zone, then the 2nd field's/Areas list box should be filtered so that user can see only Germany, France, Spain

In the same way, the moment user selected the US, then the 2nd field list box got filtered and user should see only New York, California, Houston

Same with Asia selection

My idea is as below,

Place a 3rd field as hidden field for our programming purpose, say, HIDDEN_AREA field, then, i will populate this hidden field list box from backend as/ in the pattern of US#New York, US#California, US#Houston, Europe#Germany, Europe#France, Europe#Spain, Asia#China, Asia#Japan, Asia#Thailand (with # symbol seperator, for splitting purpose)

Then, the moment user selected the US in the 1st field, then i will loop the 3rd hidden field's list box and splits at the '#' character into part_1 and part_2, then checks the 1st/left part, if the 1st part is = to the user selected entry on the 1st field (US), then, i will capture this index on the 3rd field, then i will read the entry of 2nd field with same index of 3 rd field (2nd and 3rd field's list box entries are populated in the same order), and i will store the 2nd field's entry in local memory of table type, after all iterations, i will attach/populate the 2nd field list box with local memory/ stored table

Pls. i need 3rd drop-down field Hidden_Area_Field bcz as i mentioned i am filling these drop-down value set / List box from back end ERP / SAP source/system, its DYNAMIC, i mean, i can't hard code  at the form level (either in object pallette or Editor JS coding) the any of the drop-down fields value set


1) Does my approach is make sense / safe / recommeded?

2) If not, pls. suggest me a new approach

3) If my approach is OK, then, pls. help me with JavaScript because am SAP guys (not JS), pls.,

Pls. considering the 3rd field Hidden_Area_Field necessity, pls. suggest me the JavaScript

Thank you

0 Replies