2 Replies Latest reply on Feb 14, 2013 4:18 PM by smcclung007

    Interacting dropdowns in a Form




         I am new to CQ5 and am facing difficulty in finding the solution for my problem. So finally decided to post it here and hoping for a reply from the experts over here. I am trying to implement listeners to dropdowns in my application. My requirement is to have four dropdowns and on the update of the top element all the underlying dropdowns should be updated accordingly. The values for these dropdowns are fetched from the DB and they have a foreign key relationship. I have no clue at all how this can be achieved in CQ5. After surfing over the net, I guess it is possible by using a servlet which fetches the data and constructs the JSON object and then update the dropdown options from the JSON object. I have seen various posts but could not find appropriate solution along with a code snippet for me. Here are the few concerns that I have in this regard:

      1. Where should I define the listeners and attach them to the dropdown?

      2. How do I update the options from the JSON object to the dropdown.

      3. Are there any configuration settings that are required to achieve this?


      I would like to get a code snippet with clear explanation which any newbie would expect. Please let me know if you need any information from my side.

      Thanks in advance for all those helping hands coming forward.




        • 1. Re: Interacting dropdowns in a Form
          Sudharsan S


          You can add the selectionchangedevent to the first dropdown listener and have the logic of getting the data in json format for the second dropdown and convert json to array objects and set the options property for second dropdown using setOptions method. working code below

          var select2= box.findParentByType('panel').findById('select2');

          var select2opts = [];

          response = CQ.utils.HTTP.get("your-json-url.json"); 

          if (CQ.HTTP.isOk(response)){   

              var myObject = CQ.Util.eval(response);

              for (var item in myObject) {

                  select2opts.push({value: myObject[item].value, text:myObject[item].text});





          Refer the link : http://forums.adobe.com/message/4817545

          • 2. Re: Interacting dropdowns in a Form

            Hi. I'm even more of a beginner than SriRaj. All I need to do is to populate a State and Country dropdown from a flat file somewhere that contains the key - value pairs. What's the simplest way to do this? I'm doing the same for Countries.


              "AL" => "Alabama",

                                                    "AK" => "Alaska",

                                                    "AK" => "Alaska",

                                                    "AK" => "Alaska",




            Thank you.