省市区三级联动（纯原生js）

最新推荐文章于 2021-04-09 16:52:33 发布

北冰洋_

最新推荐文章于 2021-04-09 16:52:33 发布

阅读量2.5k

点赞数 2

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_48156531/article/details/115512182

版权

地址管理（省市区）

想必大家都碰到过写地址管理的一些东西，在这就教大家一个方法，纯原生写省市区三级联动，切记必须要有省市区的json文件，或者js数据，或者后台数据库！！！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./area.js"></script>
</head>

<body>
    <select id="province">
    <option value="1">请选择省份</option>
  </select>
    <select id="city">
    <option value="1">请选择市区</option>
  </select>
    <select id="region">
    <option value="1">请选择区县</option>
  </select>
    <script>
        var province = document.querySelector('#province');
        var city = document.querySelector('#city');
        var region = document.querySelector('#region');

        var pro_str = '<option value="1">请选择省份</option>'
        for (var i in area) {
            // console.log(i)
            // console.log(area[i]);
            pro_str += '<option value="' + i + '">' + area[i].name + '</option>'
        }
        province.innerHTML = pro_str

        function getCity() {
            var city_str = '<option value="1">请选择市区</option>';
            if (province.value == 1) {
                city.value = 1
            } else {
                var obj = area[province.value].child
                for (var i in obj) {
                    city_str += '<option value="' + i + '">' + obj[i].name + '</option>'
                }
                city.innerHTML = city_str;
            }
            getRegion()
        }

        function getRegion() {
            var region_str = '<option value="1">请选择区县</option>';
            if (city.value == 1) {
                region.value = 1;
            } else {
                var obj = area[province.value].child[city.value].child
                for (var i in obj) {
                    region_str += '<option value="' + i + '">' + obj[i] + '</option>'
                }
                region.innerHTML = region_str
            }
        }
        getCity();
        province.onchange = function() {
            getCity();
        }
        city.onchange = function() {
            getRegion();
        }
    </script>
</body>

</html>

源码奉上，欢迎来探讨！

北冰洋_

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
省市区三级联动（纯原生js）

地址管理（省市区）想必大家都碰到过写地址管理的一些东西，在这就教大家一个方法，纯原生写省市区三级联动，切记必须要有省市区的json文件，或者js数据，或者后台数据库！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫