三级联动效果实现&三级联动中国城市源码&JSON要点总结

本文链接：https://blog.csdn.net/qq_40958876/article/details/89479852

JSON要点总结，文末有三级联动中国城市源码

JSON部分要点总结
1.在JSON对象中，可以存储任何类型的数据；
2.JSON不支持变量函数或对象实例；
3.JSON适用于存储和传输数据的格式，通常用于服务端向网页传输数据；
4.JSON是轻量级的文本数据交换格式；
5.JSON字符串转换为JSON对象使用 JSON.parse(参数);
6.JSON对象转换为JSON字符串使用 JSON.stringify(参数);

三级联动实现过程如下，分步理解，可以变打印边写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="area.js"></script>
</head>

<body>
    <select name="" id="provence"></select>
    <select name="" id="city"></select>
    <select name="" id="area"></select>
    <script>
        var pro = document.querySelector('#provence');
        var city = document.querySelector('#city');
        var area = document.querySelector('#area');
        //获取省份信息
        for (var i in place) {
            // 创建节点，将省份添加到页面
            var opa = document.createElement('option');
            // console.log(i);
            opa.innerHTML = i;
            pro.appendChild(opa);
        }

        //获取city信息，默认河南省
        for (var i in place['河南省']) {
            // console.log(place['河南省'][i]);//求出的是数组市
            // console.log(i)
            for (var j in place['河南省'][i]) {
                // console.log(j);//求出市
                var opa = document.createElement('option');
                opa.innerHTML = j;
                city.appendChild(opa);
            }
        }

        //获取area信息，默认河南省郑州市
        // console.log(place['河南省'][0]['郑州市']);
        for (var i in place['河南省'][0]['郑州市']) {
            // console.log(place['河南省'][0]['郑州市'][i])
            for (var j in place['河南省'][0]['郑州市'][i]) {
                // console.log(j);
                var opa = document.createElement('option');
                opa.innerHTML = j;
                area.appendChild(opa);

            }
        }
        //存储省份信息,//默认河南省
        var proce = '河南省'

        //修改省份信息，绑定事件
        pro.onchange = function () {
            // console.log(this.value);
            proce = this.value;
            //清空市里面的信息
            city.innerHTML = '';
            //控制省对应的城市信息
            for (var i in place[proce]) {
                // console.log(place[proce][i])//打印出省对应的市数组
                for (var j in place[proce][i]) {
                    // console.log(j);//选择的省对应的市信息
                    var opa = document.createElement('option');
                    opa.innerHTML = j;
                    city.appendChild(opa);
                }
            }
            //存储默认省份城市的信息
            var coun=city.children[0].innerHTML;
            // console.log(city.children[0].innerHTML+'11111111')
            //清空区的信息
            area.innerHTML='';
            //控制市修改对应区的信息
            // console.log(place[proce][0][coun]);//区对应的数组
            for(i in place[proce][0][coun]){

                for(j in place[proce][0][coun][i]){
                    // console.log(j);//对应的区
                    var opa=document.createElement('option');
                    opa.innerHTML=j;
                    area.appendChild(opa);

                }
            }

        }

        //身份确定之后，通过改变市，改变区
        city.onchange=function(){
            var cityValue=this.value;
            // console.log(this.value)
            //先清空区的信息
            area.innerHTML='';
            for(var i in place[proce][0][cityValue]){
                // console.log(place[proce][0][cityValue]);
                for(var j in place[proce][0][cityValue][i]){
                    // console.log(j);
                    var opa=document.createElement('option');
                    opa.innerHTML=j;
                    area.appendChild(opa);
                }
            }
        }




    </script>
</body>

</html>