Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How to limit a dropdown list based on previous dropdown selection.

New Here ,
Apr 09, 2020 Apr 09, 2020

I have three dropdown lists that all have information.  I am trying to figure out if there is a way to limit the selections of the second and third drop downs based on the selection of the first. So if i have options A, B and C in dropdown 1 and AA, BB, CC and DD in drowpdown 2 how do i show if you select option A to only allow you to select option BB and CC in the second one, etc. Thanks.

TOPICS
Acrobat SDK and JavaScript
1.7K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 09, 2020 Apr 09, 2020

Hi, 

 

This is done with a javascript using dependent values and conditional formatting. 

 

The dependent values in the script is what will populate the depndent  dropdowns based on the selection of Dropdown1, for example.

 

Thom Parker has an excellent and very helpful tutorial here: https://acrobatusers.com/tutorials/change_another_field/  which explains in detail how it works. You can check more articles here: https://www.pdfscripting.com/public/List-Field-Usage-and-Handling.cfm

 

You can also grab the following template posted by Joel Geraci back in 2016: http://practicalpdf.com/acrobat-javascript-examples/dependentLists.pdf  and additionally refer to "Acrobat Javascript: Change list values based on another list"  to see the structure of the script here:  https://gist.github.com/JoelGeraci/f14d5277b910d9714a509c98f28e1e4b

 

For this to work well you need to set the structure of the script with something like this as the Custom Format Script of Dropdown1:

 

 

var dependentListBoxFieldName = "Dropdown2";
var dependentListValues = 
{
	"A": [
		["BB", "CC"],
		
	],
	"B": [
		["AA", "DD"],
		
	],
	"C": [
		["CC", "EE"],

	]
};

 

 

Then, in  Dropdown2 add this line as Custom Format Script:

 

 

if (!event.willCommit){this.getField("DROPDOWN3").value=event.changeEx;}

 

 

And in Dropdown3, add this line as custom format script:

 

 

event.value = getField("DROPDOWN2").value;

 

 

 

NOTE: Using the script structure above as an example, When the user selects "A"  from the list provided in Dropdown1,  it will push the first value in the order listed in that script to populate Dropdown2; Dropdown2 will switch its selection automatically to "BB" and Dropdown3 wil get the dependent value from Dropdown2 to populate with item  "CC".

 

You're basically daisy-chaining the dropdown menu on how to push values based off of a selction and to and from each other. 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 09, 2020 Apr 09, 2020
LATEST

This is a very tricky script to write.

Here's an article that shows exactly how to do this, here:

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

 

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines