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

Avatar

Avatar

srikanthg212933

Avatar

srikanthg212933

srikanthg212933

26-05-2020

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 

AEM AEM 6.5

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Theo_Pendle

MVP

Avatar

Theo_Pendle

MVP

Theo_Pendle
MVP

26-05-2020

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! 🙂

 

Answers (3)

Answers (3)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

(val/1000)?string[".0"]}K

Likes

958

Correct Answer

820

Avatar

Arun_Patidar

MVP

Total Posts

(val/1000)?string[".0"]}K

Likes

958

Correct Answer

820
Arun_Patidar
MVP

26-05-2020

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.

 

 

 

 

 

Avatar

Avatar

Vish_dhaliwal

Employee

Avatar

Vish_dhaliwal

Employee

Vish_dhaliwal
Employee

26-05-2020

Avatar

Avatar

Vish_dhaliwal

Employee

Avatar

Vish_dhaliwal

Employee

Vish_dhaliwal
Employee

26-05-2020