省市县三级联动

2023-12-16 21:24:09
省市县三级联动
JavaScript原生代码实现如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>省市县三级联动</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    .city,.district{display: none;}
</style>

<body>
    <div class="container">
        省-市-区
        <select class="province">
            <option value="0">请选择省份</option>
        </select>
        <select class="city">
            <option value="0">请选择城市</option>
        </select>
        <select class="district">
            <option value="0">请选择区/县</option>
        </select>
    </div>
</body>
<script>
    var arr = [{
        provinceName: "河北省",
        citys: [{
            cityName: '石家庄市',
            districts: [{
                districtName: '桥东区'
            }, {
                districtName: '桥西区'
            }, {
                districtName: '桥北区'
            }, {
                districtName: '桥南区'
            }]
        }, {
            cityName: '邢台市',
            districts: [{
                districtsName: '桥东区'
            }, {
                districtName: '桥西区'
            }, {
                districtName: '桥北区'
            }, {
                districtName: '桥南区'
            }]
        }, {
            cityName: '邯郸市',
            districts: [{
                districtsName: '桥东区'
            }, {
                districtName: '桥西区'
            }, {
                districtName: '桥北区'
            }, {
                districtName: '桥南区'
            }]
        }, {
            cityName: '沧州市',
            districts: [{
                districtsName: '桥东区'
            }, {
                districtName: '桥西区'
            }, {
                districtName: '桥北区'
            }, {
                districtName: '桥南区'
            }]
        }]
    },
    {
        provinceName: "山东省",
        citys: [{
            cityName: '菏泽市',
            districts: [{
                districtName: '曹县'
            }, {
                districtName: '桥东区'
            }, {
                districtName: '桥西区'
            }]
        }, {
            cityName: '青岛市',
            districts: [{
                districtName: '黄岛区'
            }, {
                districtName: '市南区'
            }, {
                districtName: '市北区'
            }]
        }, {
            cityName: '德州市',
            districts: [{
                districtName: '德城区'
            }, {
                districtName: '陵县'
            }, {
                districtName: '平原县'
            }]
        }]
    }, 
    {
        provinceName: "重庆市",
        citys: [{
            cityName: '重庆市',
            districts: [{
                districtName: '石柱县'
            }, {
                districtName: '渝中区'
            }, {
                districtName: '南岸区'
            },{
                districtName:'沙坪坝区'
            }]
        }]
    }];


    var province = document.getElementsByClassName("province")[0];
    var city = document.getElementsByClassName('city')[0];
    var district = document.getElementsByClassName('district')[0];
    var provinceName = "";//用于存放省份的变量

   
        for(var i=0;i<arr.length;i++){
            var opt = document.createElement('option');
            //创建指定文本的按钮你需要在按钮元素后添加文本节点
            //语法：document.createElement(nodename)
            opt.text=arr[i].provinceName;
            province.add(opt,null);
            //add() 方法用于向 <select> 添加一个 <option> 元素。
            //语法：selectObject.add(option,before) 
            //option     必需。要添加选项元素。必需是 option 或 optgroup 元素。
            //before     必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。
        }

    province.onchange = function(){
        var cityOpt =document.createElement('option');
        city.innerHTML='<option>-=请选择市=-</option>';
        //获取省份下拉框选择的内容（省份下拉框的value值）
        provinceName=province.value;
         //显示市级下拉框
        city.style.display="inline";
        //从大数组中遍历省份，找到与省份对应的城市列表
        for(var i=0;i<arr.length;i++){
            //如果选中的省份与数组中的某一个相同，那么显示对应的城市列表
            if(arr[i].provinceName==provinceName){
                //设置变量cityArr用于存储市级列表
                cityArr = arr[i].citys;
                ///遍历cityArr数组，向城市下拉框中添加option元素
                for(var j=0;j<cityArr.length;j++){
                    var cityOpt =document.createElement('option');
                    cityOpt.text=cityArr[j].cityName;
                    city.add(cityOpt,null);
                }
            }
        }
    }


    city.onchange = function(){
        district.innerHTML='<option>请选择区县</option>'
        var cityName=city.value;
        district.style.display="inline";

        for(var i=0;i<arr.length;i++){
            if(arr[i].provinceName==provinceName){

                for(var j=0;j<arr[i].citys.length;j++){
                    if(arr[i].citys[j].cityName==cityName){
                        //设置变量districtArr用于存储市级列表
                        //districtArr = arr[i].citys[j].districts;
                        //遍历数组
                        for(var k=0;k<arr[i].citys[j].districts.length;k++){
                            var districtOpt = document.createElement("option");
                            districtOpt.text=arr[i].citys[j].districts[k].districtName;
                            district.add(districtOpt,null);
                        }
                    }
                }
            }
        }
    }

</script>

</html>
运行结果如图：
码农公寓

相关文章
