Cascading / Dependent dropdown lists using Acrobat DC Standard

[veryviral]

Hi,

I have tried searching a lot and am yet to come across a self-help solution/code to create cascading / dependent dropdown lists (Combo box) using Acrobat DC Standard. 

The closest match I found was a Creative Commons Custom Format free script (can't seem to find the link now) which had a bug where in the form resets when it is saved and reopened. 

Would appreciate any other suggestions.

[Thom Parker]

You'll find solutions here:

https://acrobatusers.com/tutorials/js_list_combo_livecycle/

This solution shows how the basic operations are handled. However, dependent series of lists create a state problem, because the state of the current list entered into the down stream list field is maintained dynamically in the code. This state is lost when the field is closed.  This is not a bug, it's an incomplete solution. There are two easy solutions for restoring this state. One is to follow the selection chain to restore the dynamic state. The second is to save the dynamic state as JSON in a hidden text field.  Ideally, you'd use an object at runtime to maintain this state. 

You'll find a more advanced solution here as well as a ton of scripts and sample PDFs(but it is not free):

https://www.pdfscripting.com/public/List-Field-Usage-and-Handling.cfm

The solutions presented here are more advanced and include a statmp      

[veryviral]

Thank you for your response. 

Due to my limited understanding of JavaScript, I searched for another logical but easier way to solve this via Show/Hide dropdown lists and came across this link. In the options panel, check the box that says "Commit selected value immediately" then add your code to the Custom Format Script of the Master dropbox.

Sample I customised to suit my need (posting here to assist others) that seems to be working well so far:

Note that everything after "//" are comments for you to understand the code. Append IF and Else statements similarly for additional dependent dropdown fields that you'd like to show/hide. The only downside I can think of is that I need to create as many dependent Combo Box fields as the number of options in the Master List. Welcome all constructive feedback. 

var v = this.getField("MasterList").value; //Replace MasterList with the Master/predecessor field name
if (v === "Option1") { //Replace Option1 with the first dropdown option value from the MasterList
this.getField("ComboBox1").display = display.visible; //Replace ComboBox1 with the first Combo Box (Dropdown list) field name
}
else {
this.getField("ComboBox1").display = display.hidden;
}
if (v === "Option2") {
this.getField("ComboBox2").display = display.visible;
}
else {
this.getField("ComboBox2").display = display.hidden;
}

[Thom Parker]

Showing and hiding fields is a solution to a different problem than the dependant dropdown problem you asked about. If you want help you need to describe the actual problem you are trying to solve (which you still haven't done).  Here's an article on everything you need to know about hiding and showing fields.

https://www.pdfscripting.com/public/Hiding-and-Showing-Form-Fields.cfm?sd=40

[veryviral]

I took an alternate approach by creating seperate dropdown (combo box) fields each corresponding to an option in the master dropdown list. It worked well for the four options I had to cater to however, I know it can get cumbersome for more options.

E.g. If master dropdown list is called State with options such as VIC, NSW, NT, SA, etc.; I created separate dropdown list fields to show the list of Cities within each state for instance City_VIC field would have options such as Melbourne, Brunswick, Northcote, etc. Similarly City_NSW, City_NT and so on were created. All City fields were overlayed on top of each other at the same position in the form.

Then I applied the above code to the master dropdown State to show only that City field list which corresponded to the selected State.

Hoping this would help other users in future. 

[try67]

If you're interested I've created a (paid-for) tool that allows you to set it up very easily (based on a spreadsheet) without having to write any code. You can find it here: http://try67.blogspot.com/2014/11/acrobat-create-cascading-dropdowns.html

[Bernd Alheit · Accepted solution]

This sample works:

https://documentcloud.adobe.com/link/track?uri=urn:aaid:scds:US:5090d8cf-0afc-4613-8d5c-a04011c77184 

[veryviral]

This is perfect. Thanks a ton!

I had found an older version of this file which had a bug that reset the dependent combo box selection after saving, closing and reopening the file. The one you have shared seems to be working well. 

Thank you to all who contributed.

[Nathan Rule]

Now if ionly i can get a third box that is cascaded by what is selected in the second box, lol!

[Thom Parker]

There is no limit to how many dropdowns can be cascaded. What technique are you currently using?

[Nathan Rule]

I know there is no limit, lol. 

I dont do a lot of scripting, so my knowledge is a litte rough. I currently have one drop down called "Careers" that has 20 or so options, then whenever they choose a career the box below called "specializations" is updated and it only shows 6 options based on what was chosen in the career box.

Now i want to add a third box that based on what was chosen in the Specializations box only shows the "Talents" associated with that specialization. 

I created a third drop down, but i couldnt figure out what javascript code to link it to the specializations box.

When i open all the Javascript in Visual Studio i cant find the reference to the Keystroke JS that i entered into the Custom Keystroke command.

When i return home i can post the Sript i was trying to use.

[louisn93453509]

Please keep this discussion going.  This is exactly what I'm trying to do, but, I don't know Java.  I'm needing to cascade three.

[Thom Parker]

You can find solutions, tutorials, and example files for scripting dropdowns here:

https://www.pdfscripting.com/public/List-Field-Usage-and-Handling.cfm

[Nathan Rule]

I appreciate the link, however any more detailed information that a person would want to read from the link is a membership for $149.

[Nathan Rule]

Maybe something like this for a 2 level Dropdown Box - Unsure how to add the third box. This is based on the previous posters link to the PDF example.

*/
var dependentListBoxFieldName = "dependentDropdown";
var dependentListValues = 
{
	"animal": [
		["Dogs", "dogs"],
		["Cats", "cats"],
		["Pandas", "pandas"]
	],
	"mineral": [
		["Gold", "Au"],
		["Silver", "Ag"],
		["Lead", "Pb"]
	],
	"veggie": [
		["Carrots", "carrots"],
		["Broccoli", "broccoli"],
		["Spinach", "spinach"]
	]
};
/*
You probably don't need to change anything from here down
*/
if ((event.target.type == "combobox" && event.name == "Format") || (event.target.type == "listbox" && event.name == "Keystroke")) {
	if (event.target.type == "combobox") {
		if (dependentListValues.hasOwnProperty(event.target.value)) {
			var val = this.getField(dependentListBoxFieldName).value;
			this.getField(dependentListBoxFieldName).setItems(dependentListValues[event.target.value]);
			try {
			this.getField(dependentListBoxFieldName).value = val;
			}
			catch (e) {
				
			}
		}
		else {
			this.getField(dependentListBoxFieldName).clearItems();
		}
	}
	if (event.target.type == "listbox" && dependentListValues.hasOwnProperty(event.changeEx)) {
		this.getField(dependentListBoxFieldName).setItems(dependentListValues[event.changeEx]);	
	}
}
else {
	app.alert("This script was not intended for this field type or event.");	
}

[Thom Parker]

That's kind of an odd script. Where did you get it? 

But anyway, while inefficient and full of questionable code, you can use this exact same script in a keystroke event on the the second dropdown. Just change the data that is used, the list values and the value of the "dependentListBoxFieldName"

[Nathan Rule]

thats what i was thinking, This was from the poster a few up

https://documentcloud.adobe.com/link/track?uri=urn:aaid:scds:US:5090d8cf-0afc-4613-8d5c-a04011c77184

I viewed the Javascript code of the PDF, and i believe it was probably written in acrobat - this was at the bottom.

//</ACRO_script>
//</AcroForm>

[Thom Parker]

You'll find another script in this article, and an example here: 

https://acrobatusers.com/tutorials/js_list_combo_livecycle/

[Nathan Rule]

Yes i read that one. I think i was misunderstanding what the code was doing.

I already have career and specialization working now i just need to get specialization and Talent working. Basically i could use the same code that i am currently using and just modify it:

In this case it would be :

var dependentListBoxFieldName = "Specialization";
var dependentListValues = 
{
	"Runner": [
		["Fast", "Slow", "Agressive", "tough"],

	"Sprinter": [
		["Short", "Long", "Top Speed", "Endurance"],
	
};

Last but not least i wanted a definition of each talent "Fast" or "Slow"to populate in another field (not a drop down box).

It seems bloated that i would have to rewrite each specialization one inside the script drop down of careers and then again in the talents.

[Nathan Rule]

I guess i could have originally given each specialization an alternate name like s1-s36 so i wouldnt have to rewrite their entire word each time i wanted to reference it.

[louisn93453509]

Thank you for this information.  As a Java Script illiterate, I was able to modify this to my form and have it actually work. Now I'm trying to figure out how to make it populate a second dropdown with additional information.  Using the above it would look something like this:

"veggie": [-----------------|----------------------------|-----------
		["Carrots", "carrots"],                Soil
		["Broccoli", "broccoli"],             Water
		["Spinach", "spinach"]                Sun Light

Can this second set be added to the script above?  If so, would someone be kind enough to show how / where to add this second set of instructions to the script above.  Thank you.

[Thom Parker]

The answers are in the links and scripts above. You'll also find more information about programming dropdowns here:

https://www.pdfscripting.com/public/List-Field-Usage-and-Handling.cfm

This question has been asked quite a lot, so if you search the form for dependent dropdown, or cascading list you'll find lots of answers.  If you are in need of training or would just rather have someone else do it, then please contact me through this forum or through www.pdfscripting.com

The general solution is to have a script on one of the dropdown events that is triggered when the user selects a new entry off the list. Probably the best event is Validation. Then the selected dropdown value is used to get a new list of entries for the next dropdown.  There are a lot of different ways to implement this solution.  The techniques being discussed here is the most rudimentary and inefficient. But it is the easiest to understand.   

Here is a simplified version of the script presented above that was rewritten for a Custom Validation Script on a dropdown box. This same script can be used in a series of any number of cascading dropdowns by simply changing the first two variables. 

// Modify the first two variables to match the name of the next dropdown 
// and the different item list selections for that dropdown.

var cNameOfNextDropdown = "dependentDropdown";

// List selection is based on dropdown export value
var aItemsForNextDropdown = 
{
	"animal": [
		["Dogs", "dogs"],
		["Cats", "cats"],
		["Pandas", "pandas"]
	],
	"mineral": [
		["Gold", "Au"],
		["Silver", "Ag"],
		["Lead", "Pb"]
	],
	"veggie": [
		["Carrots", "carrots"],
		["Broccoli", "broccoli"],
		["Spinach", "spinach"]
	]
};

var aNewItems = aItemsForNextDropdown[event.value];
if(aNewItems)
     this.getField(cNameOfNextDropdown).setItems(aNewItems);
else
     this.getField(cNameOfNextDropdown).setItems([]);

I 

[louisn93453509]

Thank you,  I managed to work it out by just copying the entire script, pasting it at the bottom and changing the dependent drop down name on the copy.  Seems to work okay for what I'm doing.

[Thom Parker]

What do you mean by "pasting it at the bottom". I wrote this as a Custom Validation Script for a dropdown field, so that is where it needs go. It should not exist in the same space as another script. And it is not only the dependant dropdown name that needs to be changed, but also the entries.

[louisn93453509]

You're correct on the entrys needing changed also, but, I just ran the same script twice - concurently with the changes you mentioned above.  I have no idea what I'm doing, but, it's working.