JavaScript+Json写的二级联动

省市区的联动，相当常见

我就不写这么大数据的了，先写个简单的试一试

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">

</head>

<body>
    <!--二级联动-->
    <div style="500px;margin:100px auto">
        <select id="oneDiv">
            <option selected>请选择</option>
            <option id="1">性别</option>
            <option id="2">种族</option>
            <option id="3">天赋</option>
        </select>
        <select id="childSelect"> 
            <option selected>请选择</option>
        </select>
    </div>
    <script>
        var Div = document.getElementById("oneDiv");
        Div.onchange = function () {
            var childLinkage = document.getElementById("childSelect");
            childLinkage.innerHTML = ""; // 每次进来先清空城市列表
            var divValue = this.value;
            var cities = [];

            switch (divValue) {
                case "请选择":
                    cities = ['请选择']
                    break;
                case "性别":
                    cities = ['男', '女']
                    break;
                case "种族":
                    cities = ['人族', '兽族', '妖族', '不死族']
                    break;
                case "天赋":
                    cities = ['敏捷', '耐力', '生命']
                    break;
            }
            for (var i = 0; i < cities.length; i++) {
                var option = document.createElement('option'); //先创建option
                var textNode = document.createTextNode(cities[i]); //再把城市名作为子节点填入，也可用innerHTML
                option.appendChild(textNode);
                childLinkage.appendChild(option);
            }
        }
    </script>
</body>

</html>

相关阅读:
Eclipse
Android View Attributes
Android Virtual Device
Bootstrap
Nginx常用命令
[多线程]多线程（Thread、Runnable、Callable）
Redis、MongoDB及Memcached的区别
Linux将某目录授权给某组里的某用户
CentOS修改locale解决调用API乱码问题
MyBatis与Hibernate的区别？

原文地址：https://www.cnblogs.com/WhiteM/p/7212307.html