MenusLesson 39Free preview

Cascading Dropdown

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of the Cascading Dropdown (Depending Dropdown) Menu. The option on the second dropdown (e.g. City) changes dynamically based on the value the user selected on the first dropdown (e.g. Province or State).

Key points

Storing relational data structures using JavaScript objects (Dictionary)
Listen to the event onchange on the first-level element
Empty the option on the second-level <select> element before filling the new option
Generate new <option> elements dynamically using document.createElement or object repetition

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.