6 Replies Latest reply on Mar 7, 2016 2:34 PM by emmapants42

    Populate dropdown list with results from multiple dropdown lists

    emmapants42

      Hi, I'm trying to create a form where the results from two dropdown lists would then populate another dropdown list. I'm not new to javascript, but I am new to using it in Acrobat, so while I've found some answers like this: Populate drop-down list from multiple text fields. I'm not sure where to implement this, if it's even the right thing I'm looking for.

       

      Oh and I'm using Acrobat Pro DC. Any help would be extremely appreciated!!

        • 1. Re: Populate dropdown list with results from multiple dropdown lists
          George_Johnson MVP & Adobe Community Professional

          What do you mean by "the results from two dropdown lists" exactly? Do you mean the current value of two dropdowns, or something else? When you populate a dropdown with a list of items, one of the items becomes the dropdowns current value. Which one do you want to become the current value of the dropdown when it's newly populated? Which one do you want to become the default value of the dropdown?

          • 2. Re: Populate dropdown list with results from multiple dropdown lists
            emmapants42 Level 1

            Yes, the current value. So the options to select from DropdownList3 would be:

             

            DropdownList1CurrentValue

            DropdownList2CurrentValue

             

            The default value of all these things can just be blank. And you shouldn't be able to select anything in third dropdown lists before you've made your choices for the first two. Does that make sense?

            • 3. Re: Populate dropdown list with results from multiple dropdown lists
              George_Johnson MVP & Adobe Community Professional

              For the third one to be blank you'd also normally add an additional item that appears blank (e.g., single space) as the first item.

               

              A few more more questions. What should happen in the third field if after making a selection in the third field, the user then makes a different selection in the first or second dropdowns? Would the values of the first two dropdowns ever be the same (including blank)?

              • 4. Re: Populate dropdown list with results from multiple dropdown lists
                emmapants42 Level 1

                Okay, so let's say DropdownList1 should be:

                 

                blank

                Option1

                Option 2

                 

                And let's say you select Option1. And then DropdownList2 is:

                 

                blank

                Option3

                Option4

                 

                And you select Option3. So then DropdownList3 would come up as:

                 

                blank

                Option1

                Option3

                 

                The blanks are just there because nothing should be selected as a default. And if you were to change a selection in DropdownList1 or 2, DropdownList3 should reset with the new options.

                • 5. Re: Populate dropdown list with results from multiple dropdown lists
                  George_Johnson MVP & Adobe Community Professional

                  Ok, you can create a document-level function that's called in the Validate event of each of the first two dropdowns, something like:

                   

                  // Function in document-level JavaScript

                  function updateDropdown() {

                   

                      // Get references to the input dropdowns

                      var f1 = getField("DropdownList1");

                      var f2 = getField("DropdownList2");

                   

                      // Get reference to output dropdown

                      var f3 = getField("DropdownList3");

                   

                      // Get the input field values, as strings

                      var s1 = event.target === f1 ? event.value : f1.valueAsString;

                      var s2 = event.target === f2 ? event.value : f2.valueAsString;

                   

                      // Populate the output dropdown with items, or clear it if either input dropdown is "blank" (single space item)

                      if (s1 === " " || s2 === " ") {

                          f3.clearItems();

                      } else {

                          f3.setItems([" ", s1, s2]);

                      }

                   

                  }

                   

                   

                   

                  Call this function like this in the Validate event of the first two dropdowns:

                   

                  updateDropdown();

                   

                   

                  You can of course name the function whatever you like. More information on the properties and methods used in the code is available in the Acrobat JavaScript documentation.

                  • 6. Re: Populate dropdown list with results from multiple dropdown lists
                    emmapants42 Level 1

                    That did it! Amazing!! Thank you so much!