Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Multiple Dropdown menu with same selections if/else presence problem

Avatar

Level 3

I have multiple dropdown menus, all have the same selection choices. All triggers the same visible/hidden presence event on the same objects.

All objects default presence state is invisible.

All Dropdown fields are all individually named.

example:

Dropdown 1

selection 1 --> if (this.rawValue == "1") {that2.presence = "visible";} else {that1.presence = "invisible";}

selection 2 --> if (this.rawValue == "2") {that2.presence = "visible";} else {that2.presence = "invisible";}

selection 3 --> if (this.rawValue == "3") {that3.presence = "visible";} else {that3.presence = "invisible";}

Dropdown 2

selection 1 --> if (this.rawValue == "1") {that2.presence = "visible";} else {that1.presence = "invisible";}

selection 2 --> if (this.rawValue == "2") {that2.presence = "visible";} else {that2.presence = "invisible";}

selection 3 --> if (this.rawValue == "3") {that3.presence = "visible";} else {that3.presence = "invisible";}

simple enough... however, after selecting a choice in Dropdown 1 and then another in Dropdown 2, the first value clears away/reverts back.

If I remove the 'else' condition, the values remains, but... I can't undo the selection result if a change is needed. It kind of fine, if the end users makes no mistakes in their selections, but how often that happens?

I have also tried:

that1.presence =  xfa.event.newText === "1"? "visible":"invisible";

What's going on here? Help! It seems soooo simple, but why!

Thank you in advance!

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi there,

first of all when selection 1 is made, that2 is visible and that1 is invisible in both dropdowns... just to clear that possibility of error out of the equation

also, if the selection made in drop down 2 affects the same objects in the selection of drop down 1, well it will always cancel the previous selection made...

to make sure this does not happend, you should always verify both drop down values..like the following :

or

I hope this will help.

View solution in original post

4 Replies

Avatar

Correct answer by
Level 10

Hi there,

first of all when selection 1 is made, that2 is visible and that1 is invisible in both dropdowns... just to clear that possibility of error out of the equation

also, if the selection made in drop down 2 affects the same objects in the selection of drop down 1, well it will always cancel the previous selection made...

to make sure this does not happend, you should always verify both drop down values..like the following :

or

I hope this will help.

Avatar

Level 3

First issue: Opps... yes, there's a mistake in my code. It should be:

Dropdown 1

selection 1 --> if (this.rawValue == "1") {that1.presence = "visible";} else {that1.presence = "invisible";}

...

Dropdown 2

selection 1 --> if (this.rawValue == "1") {that1.presence = "visible";} else {that1.presence = "invisible";}

...

Second Issue:

I tried the  ||  (and or statement?) and it almost works...

I first select  "1" from Dropdown1... okay!  that1 becomes visible.

I then select "2" from Dropdown2... no....  that1 becomes invisible and that2 becomes visible.

then I go back to Dropdown1 and select "1" ... okay! that1 becomes visible again and that2 remains visible.

I would like to have:

I first select "1" from Dropdown1 and that1 becomes visible.

I then select "2" from Dropdown2 and that2 becomes visible while keeping that1 visible too.

Thank you!

Avatar

Level 10

Did you apply the code I provided to both drop downs and all 3 different selections?

Avatar

Level 3

Opps! Forgot to flip the references to which dropdown is which.

None the less brilliant! Like you predicted it would. This logic works!

Thank you, thank you!