JavaScript实现省市区三级联动

JavaScript实现省市区三级联动

之前的文章中我们说到过如何利用JavaScript实现二级联动，这次我们来说说如何利用JavaScript实现三级联动。效果如图：

HTML代码：

    请选择省份：<select name="" id="province">
        <option value="">请选择省份......</option>
    </select>
    请选择城市：<select name="" id="city">
        <option value="">请选择城市......</option>
    </select>
    请选择地区：<select name="" id="area">
        <option value="">请选择地区......</option>
    </select>

JavaScript代码：

    // 1.创建三维数组
    var provinces=[];
    provinces["江苏省"]=["南京市","无锡市","苏州市"];
    provinces["浙江省"]=["杭州市","宁波市"];
    provinces["安徽省"]=["合肥市","马鞍山市"];

    var citys=[];
    citys["南京市"]=["玄武区","雨花台区","鼓楼区","秦淮区","六合区"];
    citys["无锡市"]=["滨湖区","惠山区","梁溪区"];
    citys["苏州市"]=["姑苏区","吴江区"];
    citys["杭州市"]=["西湖区","临安区","上城区"];
    citys["宁波市"]=["江北区","江东区"];
    citys["合肥市"]=["蜀山区","瑶海区"];
    citys["马鞍山市"]=["花山区","雨山区"];


    // 2.获取元素
    var oprovince = document.getElementById('province');
    var ocity = document.getElementById('city');
    var oarea = document.getElementById('area');

    for (province in provinces) {
        oprovince.add(new Option(province, province))//省份下拉菜单
    }
    oprovince.onchange = function () {//省份下拉菜单内容改变时 执行的命令
        var selectvalue = oprovince.value;//获取省份下拉菜单的值
        ocity.innerHTML = '<option value="">请选择城市......</option>';
        oarea.innerHTML = ' <option value="">请选择市区......</option>';
        for (provincename in provinces) {//遍历省份的名称
            if (provincename == selectvalue) {
                for (cityname in provinces[provincename]) {//遍历城市名称
                    ocity.add(new Option(provinces[provincename][cityname], provinces[provincename][cityname]));
                }
            }
        }
    }
    ocity.onchange = function () {
        oarea.innerHTML = ' <option value="">请选择市区......</option>';
        var cityValue = ocity.value;
        for (i in citys) {//i是area数组的索引值（城市名称）
            if (i == cityValue) {
                for (j in citys[i]) {
                    oarea.add(new Option(citys[i][j], citys[i][j]));
                }
            }
        }
    }

    // 3.向省份菜单添加选项
    for(province in provinces){
        oPro.add(new Option(province,province))
    }

    // 4.根据省份选择城市
    oPro.onchange=function(){
        var sel_val=oPro.value;//获取选择的省份
        oCity.innerHTML = '<option value="">请选择城市......</option>';
        oArea.innerHTML = ' <option value="">请选择市区......</option>';
        for(province in provinces){
            if(province == sel_val){
                for(cityname in provinces[province]){
                    oCity.add(new Option(provinces[province][cityname],provinces[province][cityname]))
                }
            }
            oCity.add(new Option())
        }
    }
    oCity.onchange=function(){
        var sel_val2=oCity.value;//获取选择的省份

        for(city in citys){
            if(province == sel_val){
                for(areaname in provinces[province]){
                    oArea.add(new Option(provinces[province][cityname],provinces[province][cityname]))
                }
            }
            oCity.add(new Option())
        }

    }

总结一下： 其实实现三级联动效果和前面实现二级联动效果基本上没太大区别，相当于是两个二级联动的“嵌套”。误区就是认为二级联动利用二维数组，三级联动就是利用三维数组。但这里其实是使用了两个二级联动进行了嵌套。

视频解析链接：
https://www.bilibili.com/video/BV1st4y1y7xs/

来源：https://www./content-1-704851.html