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.
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.
  • Facebook Social Icon
© VeloCodeBank