These forums are now Read Only. If you have an Acrobat question, ask questions and get help from one of our experts.

Dependent drop-down lists

NickiPT
Registered: May 24 2007
Posts: 12
Answered

I would like to create a form with several dependent drop-down lists. When the user picks something from the first drop-down, the values in the second drop-down will change based on the value they chose. Then based on the second drop down, the values in a third drop-down will change.
 
I found an example on this web page that does that:
http://acrobatusers.com/tutorials/2007/js_list_combo_livecycle/
 
When I renamed the fields and updated the script object language to reflect those new names, it still worked. But when I went a step further and tried to add an additional item to the drop-down menu and then change the definitions in the “var oAssemblyParts” section to include those new values, the new items do not work the way the existing items do (by changing the “PartList” and “Price” fields).
 
What am I missing here? And is there an easier way to do this - my second and third drop-down lists have a pretty long list of values? (If it involves XML schemas I have no idea how to create those so double help!)

My Product Information:
LiveCycle Designer, Windows
gkaiseril
Expert
Registered: Feb 23 2006
Posts: 4307
What were the values you were trying to add?

If there is any white space characters within the name, you need to put the object element within quotation marks.

Are you getting any error messages or unexpected pup-ups?

George Kaiser

NickiPT
Registered: May 24 2007
Posts: 12
Ah - I think it was the quotation marks! My value had spaces in it. Thank you!

So must I list each of the values individually in the script object, or could they be listed in some other format and referenced, like the XML schema thing I've read about? The office I'm building the form for has the values all listed in an Excel worksheet and users must currently open the worksheet and look up their values for the drop-down lists based on where their office is located. There are a LOT of values. Example:

Drop-down #1: HQ or District (only those 2 values)
Drop-down #2: The specific HQ or District office name (100+ values)
Drop-down #3: All of the codes related to each individual HQ or District office (100+ values)
tgizmo
Registered: Jun 14 2009
Posts: 8
I have the same question. How do you add a third, fourth, ... dependent drop down? Do I add another variable for each dependent line item? Thank you in advance for your help.

Ok - I figured it out from Thom Parker's excellent tutorial but how would I auto-fill a dependent drop-down if there is only one option?

Product A: Product ID A100, Product ID A200;
Product B: Product ID B100, Product ID B200;

Product ID A100: Red, Blue, Green;
Product ID A200: Black; **auto-fill "Black" b/c it is the only option"**
Product ID B100: Red, Blue, Green;
Product ID B200: Black; **auto-fill "Black" b/c it is the only option"**

Thank you again in advance for your help.
tgizmo
Registered: Jun 14 2009
Posts: 8
I am clarifying my question. How would I auto-fill a dependent drop-down if there is only one option?
For example,
"Product A":[["Product ID A100"],["Product ID A200"]];
"Product B":[["Product ID B100"],["Product ID B200"]];

"Product ID A100":[["Red"],["Blue"],["Green"]];
"Product ID A200":[["Black"]; ////**auto-fill "Black" b/c it is the only option"**////
"Product ID B100":[["Red"],["Blue"],["Green"]];
"Product ID B200":[["Black"]; ////**auto-fill "Black" b/c it is the only option"**////

Thank you again in advance for your help.
NickiPT
Registered: May 24 2007
Posts: 12
I am still pulling my hair out over this. I have been researching it for days online and can't figure out the right solution.

To restate my issue, I have 3 drop-down menus:

Drop-down #1 (DD1): User chooses whether they work at HQ or in a District (2 options)

Drop-down #2 (DD2): If the user chose "HQ" in DD1 they will be shown a list of 10 HQ office names in DD2; if they choose "District" in DD1 they will be shown a list of 100+ district names in DD2.

Drop-down #3 (DD3): If they user chose "HQ" in DD1 and then one of the HQ office names in DD2, they will be shown a list of sub-office names based on which HQ office they said they work in. If they chose "District" in DD1 and then chose their district name in DD2, DD3 will simply say "N/A" no matter which district office they chose.

I've been using the sample from http://acrobatusers.com/tutorials/2007/js_list_combo_livecycle/ as a guide but I can't figure out how to get it to meet my needs. In that sample, the items in the second drop-down all have one straight-forward value (a dollar amount). But I need my form to allow for each of those DD2 values to then lead to yet another drop-down with a set of DD3 values.

I finally got the ES2 upgrade if that will make this any easier...

Thanks for any assistance anyone can provide!
NickiPT
Registered: May 24 2007
Posts: 12
Accepted Answer
I figured it out thanks to finding a different way to handle this in one of radzmar's previous posts! Here are the instructions for creating multiple related drop down lists. (Please note that the forum post is not formatting the way I want it to so #4 is hidden in the code of the lines before it.)

1. DEFINE YOUR VARIABLES (File > Form Properties > Variables).Create a form variable named "Choice_1" and this code for the array.

new Array("Headquarters","District Office");

NOTE: Do not start the names of your variables with a number!

2. POPULATE THE VALUES OF THE DROP DOWN LIST.

Enter this script in the enter event of your 1st drop down list – in this example named “Choice1”:

if (this.rawValue == null){var arrayItems = eval(Choice_1.value);for (var i=0; i < arrayItems.length; i++){this.addItem(arrayItems[i]);}}Now every time you enter the drop down “Choice1”, it's populated with the values of the form variable "Choice_1".

3. DEFINE FORM VARIABLES FOR YOUR SECOND DROP DOWN LIST.

For the 2nd drop down list "Choice2" you also can define form variables, one for every value of the 1st drop down list.

Form variable "HQ":

new Array("Director’s Office","Customer Service","General Counsel","Public Affairs");

Form variable "Districts":

new Array("Northern Region","Southern Region","Western Region","Eastern Region");

To populate the values depending on the choice made on the 1st drop down list just put this script into the enter event of the 2nd drop down list:

if (Choice1.rawValue == "Headquarters" && this.rawValue == null)
{var arrayItems = eval(HQ.value);for (var i=0; i < arrayItems.length; i++){this.addItem(arrayItems[i]);this.setItemState(0,1);}}if (Choice1.rawValue == "District Office" && this.rawValue == null)
{var arrayItems = eval(Districts.value);for (var i=0; i < arrayItems.length; i++){this.addItem(arrayItems[i]);this.setItemState(0,1);}}4. CLEAR THE DROP DOWN VALUES WHEN THE USER CHOOSES A DIFFERENT VALUE

If you already have selected a value in the 1st drop down list and change this, the 2nd list needs to be cleared before populating with values. In the change event of the 1st drop down list, put:

Choice2.rawValue = null;Choice2.clearItems();Choice2.setItemState(0, true);


5. IF YOU HAVE MORE THAN TWO DROP DOWN LISTS:
If you have a 3rd drop down list, you could name it “Choice3”.

5a. Define variables for the values the 3rd drop down list. In this case, I named two of them “Director” and “Customer Service”. (For my form, their definitions were sub-offices within the main offices.)

5b. Put this code in the enter event of your 3rd drop down list:

if (Choice2.rawValue == "Director’s Office" && this.rawValue == null){var arrayItems = eval(Director.value);for (var i=0; i < arrayItems.length; i++){this.addItem(arrayItems[i]);this.setItemState(0,1);}}if (Choice2.rawValue == "Customer Service" && this.rawValue == null){var arrayItems = eval(Customer.value);for (var i=0; i < arrayItems.length; i++){this.addItem(arrayItems[i]);this.setItemState(0,1);}}And so on!

5c. If you have a 3rd drop down list, also update the change event in the 1st drop down list to add a second line of code which will clear out the fields if you go back and change your choice from either the 1st or 2nd drop down list:

Choice3.rawValue = null;Choice3.clearItems();Choice3.setItemState(0, true);

Put that code in the change event of the 2nd drop down list, too!