Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Populate a drop down box based on another drop down box selection

Avatar

Level 1

I know this has been answered before but I am really struggling to understand it. I would be very gratefull if someone could baby step me through it.

I have found examples of code to be used but I can't seem to work out where to put said code. What I want to do is create clothing order form and when a person selects the brand from the first drop down box then the next one displays the clothing from that brand. so my list would be

box1

branda

brandb

brandc

selecting branda would then populate the  box2 with

branda shirt 1

branda shirt 2

branda shirt 3

Like I said I have found code that could work if I knew where to put it, and other code that is just so confusing I don't understand how I can adapt it to what I want.

TIA

Alice

1 Reply

Avatar

Level 7

OK, baby steps. If I skip something you don't understand, reference the step number and I'll try to help.

  1. Add a drop down list.
  2. Add the items you want in the list.

    Now, this is where you have two choices. You can populate the second list based on the selection in the first list, or you can hide/reveal a list based on the first list.I recommend hiding the unused drop down lists.
  3. Add the second drop down list, and add its items.
  4. In the Object tab, under the field subtab, set presence to invisible.
  5. repeat steps 3 and 4 for each dropdown list. One for each item in your first drop down list.
  6. As an optional step, you can create one more drop down list and set it to read-only. This is just a placeholder so users aren't "shocked" when they see a new field come from nowhere.

    Now for the coding.
  7. Select your first dropdown list.
  8. Go to the javascript exit event.
  9. here's the code you'll use (I used simple names because I'm lazy.)

          if (this.rawValue == "BrandA"){

                    ddlist2.presence = "visible";

                    ddlist3.presence = "invisible";

          }

          if (this.rawValue == "BrandB"){

                    ddlist2.presence = "invisible";

                    ddlist3.presence = "visible";

          }
The code is checking the value of what the user selected in the dropdown box to determine which second drop down list to show. Without a doubt, there are probably many much more clever ways to do this with a shorter process. But, this gives you what you need and should be easy to understand.