三级联动简单

最新推荐文章于 2021-10-26 11:18:07 发布

Study 365 Always

最新推荐文章于 2021-10-26 11:18:07 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/L8676/article/details/100118434

版权


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       select{
           border: 1px solid #000000;
           width: 100px;
           outline: none;
           height: 30px;
       }
        option{
            color: #000000;
        }
    </style>
</head>
<body>
省：<select id="s1">
    <option>—请选择—</option>
</select>
市：<select id="s2">
    <option>—请选择—</option>
</select>
区：<select id="s3">
    <option>—请选择—</option>
</select>
<script>
    /*
     * json  数据模拟后台数据
     * */
    var city = [
        {
            "id": 10001,
            "name": "陕西省",
            "child": [
                {
                    "id": 100011,
                    "name": "西安市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "未央区"
                        },{
                            "id": 100011,
                            "name": "莲湖区"
                        },
                        {
                            "id": 100011,
                            "name": "碑林区"
                        }
                    ]
                },
                {
                    "id": 100012,
                    "name": "宝鸡市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "成仓区"
                        }
                    ]
                }
            ]
        },
        {
            "id": 10002,
            "name": "云南省",
            "child": [
                {
                    "id": 100021,
                    "name": "大理市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "大理市区1"
                        },
                        {
                            "id": 100021,
                            "name": "大理市区2"
                        }
                    ]
                },
                {
                    "id": 100022,
                    "name": "丽江市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "丽江市区1"
                        },
                        {
                            "id": 100021,
                            "name": "丽江市区2"
                        }
                    ]
                },{
                    "id": 100022,
                    "name": "西双版纳市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "西双版纳市区1"
                        },
                        {
                            "id": 100021,
                            "name": "西双版纳市区2"
                        }
                    ]
                },{
                    "id": 100023,
                    "name": "昆明市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "昆明市区1"
                        },
                        {
                            "id": 100021,
                            "name": "昆明市区2"
                        }
                    ]
                }
            ]
        }
    ]
    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2");
    var s3= document.getElementById("s3");
    for (var i = 0; i < city.length; i++) {
        var opt = new Option(city[i].name,i);
        s1.appendChild(opt);
    }
    //添加事件
    var cityname=null;
    s1.onchange=function (){
        //s2做个清除
        s2.options.length=1;
        //s3做个清除
        s3.options.length=1;
        var index=this.value;
        cityname=city[index].child;
        for(var i=0;i<cityname.length;i++)
        {
            var opt=new Option(cityname[i].name,i);
            s2.appendChild(opt);
        }
    }
    s2.onchange=function (){
        //s3做个清除
        s3.options.length=1;
        var index=this.value;
        var qu=cityname[index].child;
        for(var i=0;i<qu.length;i++)
        {
            var opt=new Option(qu[i].name,i);
            s3.appendChild(opt);
        }
    }
</script>
</body>
</html>

Study 365 Always

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三级联动简单

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> select{ border: 1px solid #000000; ...
复制链接

扫一扫