How to Populate a PDF Dropdown With JavaScript in Adobe Acrobat
Question details
The user wants to populate an Adobe Acrobat form dropdown field with multiple values using JavaScript, without having to convert the document to a LiveCycle form.
- Product
- Adobe Acrobat
- Device & OS
- not provided
- Scenario
- Editing and configuring advanced PDF form fields programmatically.
- Observed behavior
- Needs a method to dynamically insert an array of display and export values into a dropdown field upon document initialization.
Ensure you have access to Adobe Acrobat Pro or a PDF editor that supports document-level JavaScript execution, and note the exact field name of the dropdown you intend to populate.
Use the setItems Method in Acrobat JavaScript
The most efficient way to populate a dropdown with multiple options is by using the setItems method within a document-level script.
The setItems method allows you to pass an array of display names and an array of export values directly to the dropdown field. If the display and export values are exactly the same, providing a single array is sufficient.
Open your PDF document in Adobe Acrobat Pro and enter the 'Prepare Form' editing mode.
Locate the dropdown field you want to populate and check its exact name in the properties (e.g., 'DropdownName').
Navigate to the JavaScript tools and select 'Document JavaScripts'. Create a new script so the code will run automatically when the file opens.
Define your arrays and apply the setItems method using this syntax: var names = ["name1", "name2", "name3"]; var numbers = ["num1", "num2", "num3"]; this.getField("DropdownName").setItems(names, numbers);
Save the script, exit form editing mode, and reopen the document to ensure the dropdown list populates correctly.
Easily Add Dropdown Options in WPS PDF Without Code
If you want to avoid writing complex JavaScript, WPS Office provides a user-friendly PDF editor that lets you visually build PDF forms and populate dropdown lists manually with zero coding required.
- 1. Open PDF in WPS Office: Launch WPS Office and open your PDF document using the WPS PDF tool.
- 2. Access the Form Tab: Navigate to the 'Form' tab in the top ribbon menu to access the form creation tools.
- 3. Insert a Combo Box: Click on 'Combo Box' (Dropdown) and click anywhere on the page to insert the field.
- 4. Open Properties: Double-click the newly placed dropdown field to open its Properties dialog box.
- 5. Add Dropdown Items: Go to the 'Options' tab, type your desired Item Name and Export Value, then click 'Add' to populate the dropdown list instantly.
Frequently Asked Questions
Can I populate a dropdown field dynamically based on another field's selection?
Yes, you can add a Custom Keystroke or Format script to the first dropdown field. This script can trigger the setItems method on the second dropdown field based on the value selected in the first one.
What happens if I don't provide an export value array in the setItems method?
If you only provide one array (for example, this.getField('DropdownName').setItems(names);), Acrobat will use the items in that single array for both the display text in the dropdown and the underlying export values.
Why is my dropdown not populating when the PDF opens?
This usually happens if the JavaScript is placed in an incorrect trigger event. Ensure your script is added as a Document-Level script rather than a field-level event so it executes immediately when the document is initialized.
