Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!

Filter 2nd field drop-down list based on 1st field's value; JS pls.?

Avatar

Level 8

Hello,

I have 3 drop-down fields (3rd is a hidden field), they and their dorp-down list box entries are as follows,

1) Zone - US, EU

2) Area - New York, Houston, Missouri, Germany, France

3) Hidden_Area_Field - US$New York, US$Houston, US$Missouri, EU$Germany, EU$France

(2nd field's entries and 3rd field entries content & ORDER is same, except adding ZONE as prefix with a seperator of $)

Now, my requirement is, if user selected EU in 1st field, then the 2nd field's list box should fill with ONLY Germany, France

In the same way, if user selected the US in 1st field, then immediately the 2nd field's list box should filll with New York, Houston, Missouri

Just for example, I gave small # of entries, but actually i have big list

Pls. help me by providing the Java Script for my requirement pls.?

Thank you

15 Replies

Avatar

Level 10

Hi,

I'm not sure I understand the use of the third drop down list Hidden_Area_Field, but sounds like you just need some JavaScript code along these lines in the preOpen event of the Area drop down list;

switch (Zone.rawValue)

{

    case "US":

        this.setItems("New York,Houston,Missouri");

        break;

    case "EU":

        this.setItems("Germany,France");

        break;     

}

Here is a sample that might get you started, https://workspaces.acrobat.com/?d=K5pw*BZBIqnA9uvYbHLqXw

Regards

Bruce

Avatar

Level 8

Thank you.

Yes, pls. i need 3rd drop-down field Hidden_Area_Field bcz as i mentioned i am filling these drop-down value set / List box from back end ERP / SAP source/system, its DYNAMIC, i mean, i can't hard code  at the form level (either in object pallette or Editor JS coding) the any of the drop-down fields value set

Pls. considering the 3rd field Hidden_Area_Field necessity, pls. suggest me the JavaScript

Regards

Avatar

Level 10

Hi,

Having the drop down list bound to a data source makes is a bit different and will depend on the structure of you data.  Can you have a hidden drop down list for each zone?  Then you could copy the items from the appropriate list to the second (or area) drop down list;

Copying the items will depend if the items have just text or a text and value, so to copy just text use;

var itemList = [];

for (var i = 0; i < USdropdownlist.length; i++)

{

    itemList.push(USdropdownlist.getDisplayItem(i));

}

Areadropdownlist.setItems(itemList.join(","));

To copy one with text and value use;

var itemList = [];

for (var i = 0; i < USdropdownlist.length; i++)

{

    itemList.push(USdropdownlist.getDisplayItem(i));

    itemList.push(USdropdownlist.getSaveItem(i));

}

Areadropdownlist.setItems(itemList.join(","),2);

You could replace the setItems call in the code in my previous reply with one of these two samples.

Regards

Bruce

Avatar

Level 8

Thank you, for some reason i couldn't login to my account on Adobe forums,

hence am replying from my email account.

Thank you for your answer, yes i have a data source for all the 3 fields,

but the fillling data is very dynamic, hence i have choosen this approach,

just for example i gave geographical location instance, hence my approach

is as below,

1) Fill the 1st Zone field with US, Europe, Asia from data source

2) Fill the 2nd Area fiel with New York, Hosuton, Missouri, Germany,

France, China, Thailand - From the data source

3) Fill the 3rd field Hidden_Area_Field with US$New York, US$Hosuton, US

$Missouri, EU$Germany, EU$France, AS$China, AS$Thailand

Now, if user selects EU in 1st Zone field, immdediately,

1) Loop the 3rd Hidden_Area_Feild,

Now, Split the entry at $ into parts, say part_1 & part_2

Now, check whether the 1st part and the 1st Field content (user selected

entry) are same

if not, skip, go for next iteration/loop

If its same, then, take the 2nd part from split, and make it part of *

setItems*

Like the same, loop all the 3rd field entries, split, if 1st part is

same as 1st field selection, then use the 2nd part data for fillinng the

2nd Area Field

Pls. provide me JS for this approach

Thank you

Avatar

Level 10

Hi,

Try replacing the code in my first reply with this code;

var itemList = [];

for (var i = 0; i < Hidden_Area_Field.length; i++)

{

    var displayItem = Hidden_Area_Field.getDisplayItem(i);

    var displayItemArray = displayItem.split("$");

    if (displayItemArray[0] == Zone.rawValue)

    {

        itemList.push(displayItemArray[1]);

    }

}

this.setItems(itemList.join(","));

Regards

Bruce

Avatar

Level 8

Wow! its quick, Thank you for a very quick reply. Pls. let me know where

(1st / 2nd / 3rd field and Event name) i should place your code?

By seeing the below piece of code, am guessing your code should go on 2nd

AREA field, but, not sure the EVENT?

Pls. let me know the field and event name i need to (copy & paste ) your

code

Regards

Avatar

Level 10

Use the preOpen event of the second drop down list (the one with the areas) and the one whose items we are updating.

My code sample assumes the first drop down list (the one with the zones) is called Zone and the second drop down list is called Hidden_Area_Field.

Good luck

Bruce

Avatar

Level 8

Sure, Thank you, i will place in preOpen (as soon as user clicks the

Area/2nd field) of 2nd field, but i guess, you coded correctly as per my

requirement, its as below,

1) 1st drop down field - ZONE - US, Europe, Asia

2) 2nd drop down field - AREA - Germany, France (if user selected Europe in

the above / 1st field)

3) 3rd drop down field - HIDDEN_AREA_FIELD - all entries with concatenation

of 1st & 2nd field list - This is really hidden for user on the layout

Your code as below,

var itemList = [];

for (var i = 0; i < Hidden_Area_Field.length; i++)

{

var displayItem = Hidden_Area_Field.getDisplayItem(i);

>

var displayItemArray = displayItem.split("$");

>

if (displayItemArray[0] == Zone.rawValue)

>

{

itemList.push(displayItemArray[1]);

}

}

this.setItems(itemList.join(","));

But you wrote as below, i guess, its typo in the below statement, bcz you

coded correctly as per my requirement

My code sample assumes the first drop down list (the one with the zones) is

called Zone and the second drop down list is called Hidden_Area_Field.

I guess, its as below

My code sample assumes the first drop down list (the one with the zones) is

called Zone and the second drop down list is called Area_Field, the 3rd

field called as Hidden_Area_Field.

Just for reference, am providing my requirement again as below,

1) As soon as user selects an entry in 1st ZONE field, say, its Europe

2) The user can see only Germany, France only on the 2nd AREA field, bcz of

our code JS's filteration

Actually, my data source fills all the Areas on 2nd AREA field, like, New

York, Houston, Missouri, Germany, Frace, China, Thailand, but for

performemce & user-friendly purpose we are filtering the AREA fileld with

the help pls hiding 3rd field

Regards

Avatar

Level 10

Sorry about that, I did mean the third drop down list was called Hidden_Area_Field.

Glad to hear you got it working

Bruce

Avatar

Level 8

Thank you for your time and Thank you for your help

Regards

Avatar

Level 4

Hello (Bruce),

For some reason the provided JS (am pasting below as well) is not working, but i will debug it (by putting a message popup after each & every line of the below code so that i will track the data transfer/flow),

1) but, pls. convert the JS as a FUNCTION for reusable purpose, i mean, i hv bunch of drop-downs hence i want to use this JS as a function

2) if so, pls. let me know where should i put this newly creating FUNCTION, i mean, event name, which drop-down object name among the 3 DDs?

I also opened a new thread for this purpose, its http://forums.adobe.com/message/5744318#5744318

Thank you

Avatar

Level 3

hi,

i have a adobe livecycle form. i want to make a dynamic action here. there is a dropdwon list called relationship. there r 3 items here, SIMGLE, MARRIED AND DEFECTO. if i select married it needs to show a sub form containing partner details. subfom name is partner. if select DEFECTO also same action. but for Single I need it invisible. pls give a code and also details for it. file is here

https://www.dropbox.com/s/0k2c49x00qcse4p/Untitled1.pdf

thanks

Ali