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

Aseema

13-07-2017

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.

Accepted Solutions (1)

Accepted Solutions (1)

zeeshank1500736

13-07-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.

Answers (1)

Answers (1)

bimalp41130099

23-08-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