jQuery省市区多级联动

Html

Css

$(function() {
    var provinceArr = ["辽宁", "吉林", "黑龙江"];
    var cityArr = [
        ["大连", "鞍山", "营口"],
        ["长春", "吉林", "四平"],
        ["哈尔滨", "大庆", "齐齐哈尔"]
    ];
    var areaArr = [
        [
            ["大一区", "大二区", "大三区"],
            ["鞍一区", "鞍二区", "鞍三区"],
            ["营一区", "营二区", "营三区"]
        ],
        [
            ["长一区", "长二区", "长三区"],
            ["吉一区", "吉二区", "吉三区"],
            ["四一区", "四二区", "四三区"]
        ],
        [
            ["哈一区", "哈二区", "哈三区"],
            ["大一区", "大二区", "大三区"],
            ["齐一区", "齐二区", "齐三区"]
        ]
    ];

var provinceObj = $("#province");
    var cityObj = $("#city");
    var areaObj = $("#area");

//省的ID要声明在这里，这样就可以在其他事件中使用了。
    //但是不要设置初始值，包括市ID也不用设置初始值。因为下拉列表默认选择第一项
    var provinceId;

for (var i = 0; i < provinceArr.length; i++) {
        provinceObj.append("<option value='" + i + "'>" + provinceArr[i] + "</option>");
    }

provinceObj.change(function() {
        cityObj.empty();
        provinceId = $(this).val();
        for (var i = 0; i < cityArr[provinceId].length; i++) {
            cityObj.append("<option value='" + i + "'>" + cityArr[provinceId][i] + "</option>");
        }
        cityObj.trigger("change");
    });

cityObj.change(function() {
        areaObj.empty();
        var cityId = $(this).val();
        for (var i = 0; i < areaArr[provinceId][cityId].length; i++) {
            areaObj.append("<option value='" + i + "'>" + areaArr[provinceId][cityId][i] + "</option>");
        }
    });
    //页面加载后，就让下拉列表中有值
    provinceObj.trigger("change");
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery省市区多级联动



代码描述：jQuery省市区三级联动

更新时间：2020-06-03 00:01:41

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

住在岛屿的少年丶

相关代码

jQuery省市区多级联动

最新