三级联动

在这里插入图片描述

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三级联动</title>
</head>

<body>
    <!-- 省市区 --><select name="" id="province">
        <option value="">---请选择---</option>
    </select><select name="" id="city">
        <option value="">---请选择---</option>
    </select>/<select name="" id="distinct">
        <option value="">---请选择---</option>
    </select>
    <script>
        //    模拟json数据
        var address = [{
            "name": "陕西省",
            "child": [{
                    "name": "西安市",
                    "child": [{
                        "name": "阎良区"
                    }, {
                        "name": "长安区"
                    }, {
                        "name": "雁塔区"
                    }]
                },
                {
                    "name": "榆林市",
                    "child": [{
                        "name": "榆阳区"
                    }, {
                        "name": "绥德县"
                    }, {
                        "name": "米脂县"
                    }, {
                        "name": "横山区"
                    }]
                }
            ]
        }, {
            "name": "江苏省",
            "child": [{
                    "name": "南京市",
                    "child": [{
                        "name": "南京区1"
                    }, {
                        "name": "南京区2"
                    }, {
                        "name": "南京区3"
                    }]
                },
                {
                    "name": "连云港市",
                    "child": [{
                        "name": "连云港市1区"
                    }, {
                        "name": "连云港市2区",
                    }, {
                        "name": "连云港市3区"
                    }]
                }
            ]
        }, {
            "name": "广东省",
            "child": [{
                    "name": "佛山市",
                    "child": [{
                        "name": "佛山1区"
                    }, {
                        "name": "佛山2区"
                    }, {
                        "name": "佛山3区"
                    }]
                },
                {
                    "name": "深圳市",
                    "child": [{
                        "name": "深圳1区"
                    }, {
                        "name": "深圳2区"
                    }]
                }
            ]
        }]

        var province = document.getElementById("province");
        var city = document.getElementById("city");
        var distinct = document.getElementById("distinct");
        var cityname = null;
        var quname=null;
        // console.log(address.length);//3
        for (var i = 0; i < address.length; i++) {
            var opt = new Option(address[i].name, i);
            province.appendChild(opt);
        }
        province.onchange = function () {
            city.options.length=1;
            distinct.options.length=1;
            var index = this.value;
            cityname = address[index].child;
            for (var i = 0; i < cityname.length; i++) {
                var opt = new Option(cityname[i].name, i);
                city.appendChild(opt);
            }
        }
        city.onchange=function (){
            distinct.options.length=1;
            var index=this.value;
            quname=cityname[index].child;
            for(var i=0;i<quname.length;i++){
                var opt=new Option(quname[i].name,i);
                distinct.appendChild(opt);
            }
        }
        //option(text,value);
        //option(下一级内容,索引)
    </script>

</body>

</html>

你可能感兴趣的:(javascript)