top of page

Conditional Dropdown Input Fields


It is often helpful to break up large lists into conditional lists when requiring users to choose options from a dropdown menu. For example, when a city input is required from a dropdown list - it is easier for the user to pick their region first and then be presented a shorter list of locations within the selected region to choose from.
The screenshot below shows a conditional dropdown input. In this case the Region field is enabled on page load while the Sub-Region is disabled on page load. Once the Region has been selected (Canterbury in this case), then other options in the Sub-Region are made available using code. The options of each dropdown will be defined using code. Connect both dropdowns to the dataset and fields you would like the input data to be saved. Ensure that the dataset you are saving to is write-only and that the collection has the appropriate user permissions. Give each dropdown input an alias (iptRegion and iptLocation in this example). Add an onChange event listener to each button.
Lines Of Code
The options for the conditional dropdown inputs are stored as a collection (called Region), similar to the screenshot below. There is a region field, a sub-region field called location and a numeric field to maintain a predefined sort order for the regions and sub-regions. Each region entry is repeated for every sub-region (or location) entry and will be de-duplicated on use. You do not need to add the dataset with the dropdown options to your page - the collection will be referenced directly using code. Dropdown options should be mutually exclusive - so for this example we have 'Other or Not Specific' as an option to account for smaller locations not listed, or if all of the region is sought by the user.
Lines Of Code
The uniqueRegion function populates the iptRegion dropdown menu with de-duplicated regions from a collection called Region. The function is run onReady to populate the iptRegion dropdown as soon as the page loads. The regions list is sort ordered by the orderBy variable found in the collection, which predefines the order in numerical value. You don't need an explicate orderBy field in your collection. You could order alphabetically by the region field itself or not order at all.
Lines Of Code
The uniqueLocation function populates the iptLocation dropdown menu with locations (or sub-regions) from a collection called Region. This function is not called onReady as we don't know which Region has been chosen by the user yet. However, once the region is chosen, the Region collection is filltered to only include locations from this region.
Lines Of Code
Once a region is selected, the iptRegion_change function enables the iptLocation dropdown for input and populates it with locations within the selected Region.
Lines Of Code
Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.
bottom of page