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

[Aseema]

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.

[zeeshanKhan0786 · Accepted solution]

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.

[bimalp41130099]

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