当前位置:首页网页设计 > 正文

jquery 二级城市联动

作者:野牛程序员:2024-02-03 10:13:22网页设计阅读 2393

jQuery实现二级城市联动的方法如下:

// 假设你有两个select元素,一个用于选择省份,一个用于选择城市
var $provinceSelect = $('#province');
var $citySelect = $('#city');

// 假设你有一个包含省份和城市信息的JSON对象,结构如下:
var provinceCityData = {
    "江苏省": ["南京市", "苏州市", "无锡市", "常州市"],
    "浙江省": ["杭州市", "宁波市", "温州市", "嘉兴市"],
    // 其他省份及城市信息
};

// 当选择省份时,更新城市选项
$provinceSelect.on('change', function() {
    var selectedProvince = $(this).val(); // 获取选择的省份

    // 清空城市选项
    $citySelect.empty();

    // 如果选择的省份在数据中有对应的城市信息,则将城市选项填充
    if (provinceCityData[selectedProvince]) {
        // 遍历选择的省份对应的城市数组
        $.each(provinceCityData[selectedProvince], function(index, city) {
            // 创建城市选项并添加到城市select元素中
            $citySelect.append('<option>' + city + '</option>');
        });
    }
});

// 初始化省份选项
$.each(provinceCityData, function(province) {
    $provinceSelect.append('<option>' + province + '</option>');
});

// 触发一次省份选择事件,以便初始化城市选项
$provinceSelect.trigger('change');

上面的代码首先假设你有两个select元素,一个用于选择省份,一个用于选择城市,并且有一个包含省份和城市信息的JSON对象provinceCityData。当选择省份时,通过jQuery监听省份选择的变化事件,根据所选省份更新城市选项。


野牛程序员教少儿编程与信息学奥赛-微信|电话:15892516892
野牛程序员教少儿编程与信息学竞赛-微信|电话:15892516892
相关推荐

最新推荐

热门点击