In AEM based on selection of drop-down show some(hide some) options in other dropdown

[#1]

Hi, 

currently dropdownshowhide.js is able to perform hide and show field/fields based on the dropdown selection.

I have requirement like below:

I have two dropdowns lets say dp1&dp2. 

• dp1 contains option1 and option2 as options
• dp2 contains a,b,c,d,e,f as options

so if dp1 is selected option1 then I want to show a,b,c options in dp2(hide d,e,f)

And similarly dp1 is selected option2 then I want to show d,e,f options in dp2(hide a,b,c)

How can I achieve the above let me know if anyone come across the situation similar to this. Thanks in advance

@Arun_Patidar @Theo_Pendle @Veena_Vikram 

[#2 · Accepted solution]

Hi @srikanthg212933,

I answered a similar question recently. For your specific case I think the best option that will be simplest and require least maintenance is the following: Modify the content of dp2 in the front end. This is the quickest solution. Follow this tutorial to design a simple framework for dynamically modifying TouchUI dialogs: AEM: Conditionally show or hide a field based on a Checkbox widget (or anything else). The tutorial doesn't use your exact use case, but it doesn't have to because it's easily extensible 🙂

@Vish_dhaliwal also shared a useful previous answer which modified the content of dropdown by making changes in the datasource in the back end. The problem with this is that you still need front-end code to make it work. If you needed some kind of backend validation, or if the values in dp2 are truly dynamic (ie: they changed based on which user is logged, the day of the week etc.) then manipulating the datasource would make sense but it doesn't seem like that's your use-case. If you chose to go that route anyways, here is a tutorial to create a generic framework for building datasource (you can probably tell by now that I like extensible frameworks 😂  AEM: Populate a drop-down with a data source

Let me know if that helps! 🙂

[srikanthg212933]

Hi,

You need to write a custom frontend javascript code to achieve this. The OOTB dropdownshowhide.js will not work to hide options of other dropdown options.

If you know the options are fixed in both the dropdown then it will be a simple javascript code.

[srikanthg212933]

any references

[Arun_Patidar]

you can reuse the dropdownshowhide.js code, just need to add different selector and show hide dropdown option logic would be different as dropdown options wrapped around overlay. Please try and let me know.

[srikanthg212933]

I am able to do it with one extra hidden field to preserve in between values and a servlet to deliver options along with some java script logic which handles ajax with on select events. bit of effort but worth.

[Arun_Patidar]

This make sense and worth it if you have second dropdown option dynamic(not just show and hide).

[srikanthg212933]

yes youre right!! but I don't find it easy hiding specific drop down options in a dropdown using js (instead delivering options from data source looks more easy as a java guy ;-))

[srikanthg212933]

Please review post: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamically-populate-selec...

[srikanthg212933]

Hi ,my requirement is not about populating second dropdown dynamically. I am looking for static options hide and show(some fields at a time) based on first drop down selection

[#11]

Please review post: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamically-populate-selec...

Hope this helps!