JavaScript+Json写的二级联动

最新推荐文章于 2024-04-21 14:34:19 发布

weixin_30340617

最新推荐文章于 2024-04-21 14:34:19 发布

阅读量129

点赞数

文章标签： json javascript 大数据 ViewUI

原文链接：http://www.cnblogs.com/WhiteM/p/7212307.html

版权

省市区的联动，相当常见

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

<!DOCTYPE html>
<html>

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

</head>

<body>
    <!--二级联动-->
    <div style="width: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>

转载于:https://www.cnblogs.com/WhiteM/p/7212307.html

weixin_30340617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript+Json写的二级联动

省市区的联动，相当常见我就不写这么大数据的了，先写个简单的试一试<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"></head><body> ...
复制链接

扫一扫