Dependent Dropdown Example

This tutorial will show you how to create dependent or cascaded dynamic dropdown using jQuery. Sometimes we need to create such a cascaded dropdown where we need to select some value in the second dropdown based on first dropdown value. For example, we need to select city dropdown value based on country dropdown value and for this we cannot pre-populate the city dropdown value unless we know the country from country dropdown.

I will explain here with an example using jQuery. The example here contains two dropdown – one is parent dropdown that contains Continents & Oceans and another is sub-dropdown that contains continets names & oceans names and will be displayed based on selected parent dropdown value.

When home page opens

dependent dropdown jQuery

When parent select box is selected

dependent dropdown jQuery

The full HTML

Read also Dependent dropdown example in PHP, MySQL

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *