How do I show/hide the next selection field in a dropdown based on the previous selection? | Community
Skip to main content
A
Aseema
Level 2
July 13, 2017
Solved

How do I show/hide the next selection field in a dropdown based on the previous selection?

  • July 13, 2017
  • 2 replies
  • 3795 views

We have a requirement where we are supposed to show the 2nd question from the dropdown based on the answer of the 1st question.

Currently on aem 6.2 component.

Any code help is appreciated.

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 zeeshanKhan0786

Hi Aseema,

If you are talking about hide and show in dialog this article will give you the code snippet you can change accordingly

Toggle fields based on selection in Granite UI dialogs | Adobe AEM Club

If you are talking about the showing the data into Page,

1. You have the question and their link question either into the node or in the file as json formet.If questions is in the node make the json array based on the first question and inside another array of related second question.

2.Iterate through the json array and display the first level array question into selection box and rest of the thing in second selection is hide and show the related question using jQuery.

2 replies

zeeshanKhan0786
zeeshanKhan0786Accepted solution
Level 5
July 13, 2017

Hi Aseema,

If you are talking about hide and show in dialog this article will give you the code snippet you can change accordingly

Toggle fields based on selection in Granite UI dialogs | Adobe AEM Club

If you are talking about the showing the data into Page,

1. You have the question and their link question either into the node or in the file as json formet.If questions is in the node make the json array based on the first question and inside another array of related second question.

2.Iterate through the json array and display the first level array question into selection box and rest of the thing in second selection is hide and show the related question using jQuery.

B
bimalp41130099
August 23, 2019

The show/hide container based on the dialog field value is available with OOTB AEM functionality.

The code example in cq:dialog is something like -

<showHideOptions
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/select"
   class="cq-dialog-dropdown-showhide"
   cq-dialog-dropdown-showhide-target=".showHideOptions"
   fieldLabel="Select fields"
   name="./options">
  <items jcr:primaryType="nt:unstructured">
  <default
   jcr:primaryType="nt:unstructured"
   text="Default"
   value=""/>
  <another
   jcr:primaryType="nt:unstructured"
   text="Any Other"
   value="another-selector"/>
  </items>
</showHideOptions>


<container
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/container"
   class="showHideOptions"
   showhidetargetvalue="another-selector">
  <items jcr:primaryType="nt:unstructured">

/// Any component can be placed here that will be only visible when selected "Any Other"

/// dropdown value from the select component above.

</items>

</container>

> cq-dialog-dropdown-showhide-target value need to match with the container's class value.

> showhidetargetvalue in container need to match with the value of select items'

> select component needs cq-dialog-dropdown-showhide as a class

Terms & ConditionsAccessibility statement

Loading footer...