Change dropdown values based on another dropdown | Community
Skip to main content
V
Vaishnav_S
Level 2
November 30, 2022
Solved

Change dropdown values based on another dropdown

  • November 30, 2022
  • 2 replies
  • 1656 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mohit_KBansal

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/

2 replies

K
Community Advisor
KNanCommunity Advisor
Community Advisor
November 30, 2022

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-value-in-one-dropdown-based-on-other/m-p/285476

 

Hope this helps....

 

Thanks

 

 

    V
    Vaishnav_SAuthor
    Level 2
    November 30, 2022

    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
      Adobe Employee
      Mohit_KBansalAdobe EmployeeAccepted solution
      Adobe Employee
      December 1, 2022

      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/

        Terms & ConditionsAccessibility statement

        Loading footer...