How To Create A Cascading Dropdown List Using JavaScript?

Last Updated : 09 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

These are the approaches to create a cascading dropdown list using JavaScript:

Table of Content

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.

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 with
        jQuery</title>
    <script src="
    https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <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']
        };
        $('#country').on('change', function () {
            const country = $(this).val();
            const $stateDropdown = $('#state');
            $stateDropdown.empty().append
                ('<option value=""> Select a state / province</option > ');
            if (states[country]) {
                states[country].forEach(state => {
                    $stateDropdown.append(new
                        Option(state, state.toLowerCase().
                            replace(/\s+/g, '-')));
                });
            }
        });
    </script>
</body>

</html>

Output:


Next Article
How To Create A Cascading Dropdown List Using JavaScript?

G
gururaj69bn
Improve
Article Tags :

Similar Reads