三级联动

最新推荐文章于 2019-04-16 20:22:49 发布

BigTooth19

最新推荐文章于 2019-04-16 20:22:49 发布

阅读量218

点赞数

分类专栏：前端 javascript

本文链接：https://blog.csdn.net/qq_34044224/article/details/73901394

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

方法一：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<title>三级联动</title>
	<script type="text/javascript" src="many/jquery.min.js"></script>
</head>
<body>
<select class="level-one"></select>
<select class="level-two"></select>
<select class="level-three"></select>
<script type="text/javascript">
var postObj =[
    {
        "id":"1",
        "name":"客服服务",
        "son":[
            {
                "id":"1-1",
                "name":"客服服务一室",
                "son":[
                    {
                        "id":"1-1-1",
                        "name":"客服服务一组",
                    },
                    {
                        "id":"1-1-2",
                        "name":"客服服务二组",
                    }
                ]
            },
            {
                "id":"1-2",
                "name":"客服服务二室",
                "son":[
                    {
                        "id":"1-2-3",
                        "name":"客服服务三组",
                    },
                    {
                        "id":"1-2-4",
                        "name":"客服服务四组",
                    },
                    {
                        "id":"1-2-5",
                        "name":"客服服务五组",
                    }
                ]
            }
        ]
    },
    {
        "id":"2",
        "name":"国内值机",
        "son":[
            {
                "id":"2-1",
                "name":"国内值机一室",
                "son":[
                    {
                        "id":"2-1-1",
                        "name":"国内值机一组",
                    },
                    {
                        "id":"2-1-2",
                        "name":"国内值机二组",
                    },
                    {
                        "id":"2-1-3",
                        "name":"国内值机三组",
                    }
                ]
            },
            {
                "id":"2-2",
                "name":"国内值机二室",
                "son":[
                    {
                        "id":"2-1-4",
                        "name":"国内值机四组",
                    },
                    {
                        "id":"2-1-5",
                        "name":"国内值机五组",
                    },
                    {
                        "id":"2-1-6",
                        "name":"国内值机六组",
                    }
                ]
            }
        ]
    }
];

var dataArr = [];
function recursionData(data,name){
    for(var i=0,len=data.length; i<len; i++){
        if(name == ''){
            dataArr = data;
        }else if(data[i].name = name){
            dataArr = data[i];
        }else{
            if(data[i].son && data[i].son.length>0){
                recursionData(data[i].son,name);
            }
        }
    }
    return dataArr;
}
function renderData(selector,data){
    if(typeof data[0] != 'undefined'){
        for(var i=0,len=data.length; i<len; i++){
            if(data[i].length > 0){
                data = data[i];
                break;
            }
        }
        var html = '';
        if(!data[0] instanceof Array){
            $.each(data,function(k,v){
                html += '<option>'+v.name+'</option>';
            }); 
            $(selector).html(html);
        }
    }
}
renderData('.level-one',recursionData(postObj,''));
</script>
</body>
</html>