Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 3

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

 

@arunpatidar @Theo_Pendle @VeenaVikraman 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 10

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!

 

View solution in original post

10 Replies

Avatar

Level 3
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

Avatar

Correct answer by
Level 10

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!

 

Avatar

Community Advisor

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.

 

 

 

 

 



Arun Patidar

Avatar

Community Advisor
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.


Arun Patidar

Avatar

Level 3

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.

Avatar

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


Arun Patidar

Avatar

Level 3

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 ;-))