Example Description
This example demonstrates change the options of a dropdown based on a previous selection.
How We Built It
This example demonstrates how to build a cascading form.
Cascading elements help users quickly refine their input while filling out fields in submission and search forms. Cascading is the operation of automatically populating a form element with options based on a previous selection.
Here the first dropdown element asks a user to select a country. The second dropdown element is populated dynamically with the states located in the selected country, or it’s disabled for countries without states.
We implement the cascade using the onChange event of the first dropdown. The state information is imported from the states.js file in the site’s Public section. In this example, the only countries with state or province information are the United States and Canada.
Next Steps
Open this example in the Editor to work with the template.
Publish the site.
Learn how to work with examples in Velo.
Related Examples
Did this help?
|
Thanks for your feedback!
Cascading Form
Change the options of a dropdown based on a previous selection.
Intermediate
Multistage Form
Create a form split into multiple steps.
Beginner
Basic Form
Create a basic form without writing a line of code.
Beginner
Collapsing Form
Collapse and expand sections of a form.
Beginner