Change dropdown values based on another dropdown

[Vaishnav_S]

Hi,

I am trying to create a component which has the same implementation like Country, State, City. ie: When Country is selected from Dropdown1, only States related to that Country should be populated on the dropdown2 and similarly for City dropdown.

My project is currently in Classic UI (We are in the process of migrating to Touch UI). But want to implement this functionality in Classic UI. Any help is appreciated.

Thanks

[KannanC]

Hi

As you are working in Classic UI - to perform this use case, you need to write a custom xtype. In the code of the custom xtype, you can invoke the servlet. 

Details here on how to write a custom xtype that shows how to populate a 2nd field based on the 1st selection (in your use case, populate the 2nd with the values returned from the servlet):

Scott's Digital Community: Dynamically updating AEM custom xtype fields

Ref :https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamically-populate-the-v...

Hope this helps....

Thanks

[Vaishnav_S]

Hi,
Thanks for the reply. The article doesn't seems to be helping. Do you know whether listeners can be used here?

Thanks,

[Mohit_KBansal · Accepted solution]

I suggest the following approach

1. Create a Generic List [1] named "country" for countries <Australia:au, India:in ...>
2. Create state generic lists, one for each country, named (au-state / in-state), and add states in it.
3. Create Cities generic lists, one for each state-country combination (in-hp-cities, in-rj-cities, in-up-cities)

Now in your dialog's Country dropdown, set the option value as Country generic list

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Widget"
    fieldLabel="Target"
    name="./target"
    options="/etc/acs-commons/lists/countries/_jcr_content.list.json"
    type="select"
    xtype="selection"/>

Add a dropdown event handler [2] on the country dropdown to set the option value of the state dropdown and the same for the city dropdown.

This approach will give the capability of content editors to manage the country-state-city list.

[1] https://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists/index.html

[2] https://aemcorner.com/add-listeners-to-widgets-in-cq5/