Skip to end of banner
Go to start of banner

Cascading Dropdown

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

A cascading dropdown, also known as dependent or linked dropdown, is a user interface element commonly used in forms. It consists of two or more dropdown lists where the options in one dropdown are dynamically updated based on the selection made in another dropdown. The goal is to provide a more interactive and user-friendly experience by narrowing down the available options based on user choices.

Let's say you have two dropdown lists: one for selecting a Person and another for selecting a Group. The options in the group's dropdown would depend on the person selected. As the user chooses a person, the group dropdown is dynamically updated to show only the groups associated with the selected person.

Cascading dropdowns are commonly used in various scenarios, such as address forms, product categorization, and any situation where the available options depend on a prior selection.

Demonstration

In my form control, I will incorporate two dropdowns. The initial dropdown will be populated with a list of individuals in EmpowerID. Subsequently, based on the selection from the first dropdown, I will dynamically filter the options in the second dropdown to display only the groups associated with the selected person.

Steps to create a Form

  1. Create a form, save it, and give it a meaningful name, such as CascadingDropdownForm.

  2. Add two objects of type string and rename them as PersonDropdown and GroupDropdown, respectively.

  • No labels