如何使用 jQuery 动态填充级联下拉菜单？

使用 jQuery 填充级联下拉列表

问题

创建一个包含两个下拉列表（国家和城市）的表单，您需要使它们动态，以便仅所选国家/地区的城市可见。您已将 JavaScript 转换为 jQuery 以获得更好的兼容性，但仍然面临一些问题。

原始 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 解决方案

以下 jQuery 代码达到预期的结果：

<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>

工作原理

此代码将国家/地区与城市的关系存储在位置对象中。当国家/地区下拉列表更改时，更改事件处理程序将获取所选国家/地区并从位置对象中检索相应的城市。然后，它为城市构建 HTML 选项并替换位置下拉列表的内容。

以上是如何使用 jQuery 动态填充级联下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！