Home >Web Front-end >JS Tutorial >How to Dynamically Populate Cascading Dropdowns with jQuery?

How to Dynamically Populate Cascading Dropdowns with jQuery?

Barbara Streisand
Barbara StreisandOriginal
2024-11-03 03:13:29469browse

How to Dynamically Populate Cascading Dropdowns with jQuery?

Populate Cascading Dropdowns with jQuery

Problem

Creating a form with two dropdowns (Country and City), you need to make them dynamic so that only the cities of the selected country are visible. You've converted your JavaScript to jQuery for better compatibility, but you're still facing some issues.

Original JavaScript

<code class="javascript">function populate(s1, s2) {
    var optionArray;
    switch (s1.value) {
        case "Germany":
            optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];
            break;
        // ... more cases
        default:
            optionArray = ["|"];
    }

    for (var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}</code>

jQuery Solution

The following jQuery code achieves the desired result:

<code class="javascript">jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return `<option value="${lcn}">${lcn}</option>`
        }).join('');
        $locations.html(html)
    });
});</code>

How it Works

This code stores the country-city relationships in the locations object. When the country dropdown is changed, the change event handler gets the selected country and retrieves the corresponding cities from the locations object. It then constructs HTML options for the cities and replaces the contents of the location dropdown.

The above is the detailed content of How to Dynamically Populate Cascading Dropdowns with jQuery?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn