How to Dynamically Populate Cascading Dropdowns with jQuery?-JS Tutorial-php.cn

How to Dynamically Populate Cascading Dropdowns with jQuery?

Barbara Streisand

Release： 2024-11-03 03:13:29

Original

430 people have browsed it

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>

Copy after login

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>

Copy after login

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!