AreaJSON，省市区显示，三级联动

作者: 影之封封 | 来源:发表于2017-05-22 22:24 被阅读199次

AreaJSON，省市区显示，三级联动
整理一些Vue开发中常用的组件(长期更新)
2018-07-26
vue三级联动
原生js实现地址选择组件（三级联动）
省市区三级联动案例
iOS头条新闻App、自动布局、省市区联动、登录按钮动画、Ale
Django Admin实现三级联动(省市区)
Android-省市区三级联动
iview踩坑

百度的AreaJSON

不知道百度的URL能不能一直能用
https://passport.baidu.com/js/sitedata_bas.js

demo效果图

demo下载地址
密码:tpqb

html参考例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 百度的链接不知道会不会一直能用 -->
    <script type="text/javascript" src="https://passport.baidu.com/js/sitedata_bas.js" charset="GBK"></script>
    <!-- <script type="text/javascript" src="arrCity.js" charset="utf-8"></script> -->
</head>
<body>
<select id="a" onchange="functionA()"></select>
<select id="b" onchange="functionB()"></select>
<select id="c" hidden="hidden"></select>
</body>

<script language="JavaScript">
    var arrCity = arrCity;//省份或者直辖市
    var b = []; //二级城市

    var selectA = document.getElementById("a");
    var selectB = document.getElementById("b");
    var selectC = document.getElementById("c");

    for(var i = 0; i < arrCity.length; i++) {
        var option = "<option value='" + i +"'>" + arrCity[i].name + "</option>";
        selectA.innerHTML = selectA.innerHTML + option;
    }


    function functionA() {
        selectC.setAttribute("hidden", "hidden");

        var value = selectA.value;
        b = arrCity[value].sub;//获取二级城市

        selectB.innerHTML = "";
        for(var i = 0; i < b.length; i++) {
            var option = "<option value='" + i +"'>" + b[i].name + "</option>";
            selectB.innerHTML = selectB.innerHTML + option;
        }
    }
    function functionB() {
        var value = selectB.value;
        var c = b[value].sub;//获取三级区域

        if (c === undefined) {//判断区域是否存在
            selectC.setAttribute("hidden", "hidden");
            return;
        }
        selectC.removeAttribute("hidden");
        selectC.innerHTML = ""
        for(var i = 0; i < b.length; i++) {
            var option = "<option value='" + i +"'>" + c[i].name + "</option>";
            selectC.innerHTML = selectC.innerHTML + option;
        }
    }
</script>
</html>