How To Create A Cascading Dropdown List Using JavaScript?

Last Updated : 09 Sep, 2024

The Cascading dropdown lists are used to display options in a secondary dropdown based on the selection made in a primary dropdown. This is useful in forms where users need to select categories or locations in the hierarchical manner. For example: selecting a country might reveal states or provinces specific to that country.

Prerequisites

Table of Content

Using JavaScript with HTML Select Elements
Using JavaScript with Libraries (e.g. jQuery)

Using JavaScript with HTML Select Elements

This is the most basic method which involves using JavaScript to dynamically populate the options of the second dropdown based on the selection in the first dropdown.

Example: Below example demonstrates dropdowns using HTML select elements for Country and a Dropdown for Select a state/province.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
      initial-scale=1.0">
    <title>Cascading Dropdown Example
    </title>
    <style>
        body {
            font-family: Arial,
                sans-serif;
        }

        select {
            margin: 10px 0;
            padding: 5px;
        }
    </style>
</head>

<body>
    <label for="country">
        Country:</label>
    <select id="country">
        <option value="">
            Select a country
        </option>
        <option value="usa">
            USA</option>
        <option value="canada">
            Canada</option>
    </select>
    <label for="state">
        State/Province:</label>
    <select id="state">
        <option value="">
            Select a state/province
        </option>
    </select>
    <script>
        const states = {
            usa: ['California', 'Florida', 'New York'],
            canada: ['Ontario', 'Quebec', 'British Columbia']
        };
        document.getElementById('country').
            addEventListener('change', function () {
                const country = this.value;
                const stateDropdown =
                    document.getElementById('state');
                stateDropdown.innerHTML =
                    '<option value="">Select a state / province</option > ';
                if (states[country]) {
                    states[country].forEach(state => {
                        const option =
                            document.createElement('option');
                        option.value =
                            state.toLowerCase().replace(/\s+/g, '-');
                        option.textContent = state;
                        stateDropdown.appendChild(option);
                    });
                }
            });
    </script>
</body>

</html>

Output:

Using jQuery

This approach uses libraries like jQuery to the simplify the process of creating cascading dropdowns.The jQuery provides convenient methods for the DOM manipulation and event handling.

Example: Below is the example demonstrating cascading dropdown using JavaScript with libraries having two dropdowns one for Country and one for Select a state/Province.