Multiple Dynamic Cascading Drop-Down List

Joget Form Builder also allows the creation of dynamic cascade drop-down lists that change the options of a select box, radio button, or radio based on multiple form field values within the same form. Each option is a list of data from another form with an option data store configuration. To do so, follow the steps below:

1. Create multiple simple forms with a 'Name' text field with no Advanced Options configuration to create an option data list. For this example, create Climate and Continent Forms with the same configuration.

2. Create a Country Form with the same configuration as before, but add 'Climate' and 'Continent' select boxes.
3. On the 'Continent' select box choose Form Data in Load Data From.
4. In the Configure Form section, configure the following fields:
   
   • Form: Continent
   • Label column: name
      
5. Do the same for the 'Climate' select box (using the Climate Form in the options)
6. Create an Address Form with all the previous forms as a select box with 'Continent,' 'Climate,' and 'Country' with the same configuration.
7. On the 'Country' select box, choose Form Data in Load Data From.
8. In the Configure Form section, configure the following fields:
   
   • Grouping Column: climate ; continent
   • Check the use AJAX for Cascade Options? checkbox.
     
9. In the Dependency section, input the Field IDs
   
   

   The Field ID to Control Available Options Based on the Grouping must be in the same order as the order in the Grouping Column  Make sure to click on the Field IDs rather than type them. You should only be typing the ';' symbol.

10. Apply and save the changes. 
11. Preview your form.

Now you can see the 'Country' column differs based on the 'Climate' and 'Continent' columns.

• If Climate is Tropical
  
  
• If the Climate is Seasonal