级联选择器

修改项目的时候发现少了一个级联选框 ，本来打算用layui 我嫌他写的不好（太菜啦放不进去） 然后只能在百度一个了哈哈哈
（他只能选择最后一级哈）
看代码
最后的样式就是这个样子的

html

        <div class="form-group">
            <label class="col-sm-3 control-label">所在部门：</label>
            <div class="col-sm-8">
                <div class="dropdown">
                    <a id="asset_type_btn" role="button" data-toggle="dropdown" class="btn btn-default"
                       style="background-color: white" href="javascript:;">
                       <span  id="deptIdNew" >所在部门</span> <span class="caret"></span>

                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="assert_type_btn">
                    </ul>
                </div>
            </div>
        </div>

js

 //立即执行函数
    $(function () {
        //调用初始化下拉方法
        initData();
    });

    //初始化dropdown中内容
    function initData() {
        $.ajax({
            url: deptUrl + "/sysDepts",
            type: "post",
            data: null,
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须*/
            success: function (data) {
                var option = {
                    maxLevel: 5,
                    data: data
                };
                processData(option);
            }
        });
    }

    //js拼接html代码
    function processData(option) {
        for (var i = 1; i <= option.maxLevel; i++) {
            if (i == 1) {
                $.each(option.data, function (n, value) {
                    if (value.level == 1) {
                        if (value.childFlag == 0) {
                            var result = "<li><a tabindex=\"-1\" href=\"javascript:;\" id=\"deptId" + value.deptId + "\" onclick=\"selectType('" + value.deptId + "','" + value.deptName + "')\">" + value.deptName + "</a></li>";
                            $("#asset_type_btn").next().append(result);
                        } else {
                            var result = "<li class=\"dropdown-submenu\"><a tabindex=\"-1\" class=\"disabled\" id=\"deptId" + value.deptId + "\" href=\"javascript:;\">" + value.deptName + "</a><ul class=\"dropdown-menu\"></ul></li>";
                            $("#asset_type_btn").next().append(result);
                        }
                    }
                });
            } else {
                $.each(option.data, function (n, value) {
                    if (value.level == i) {
                        if (value.childFlag == 0) {
                            var result = "<li><a tabindex=\"-1\" href=\"javascript:;\" id=\"deptId" + value.deptId + "\" onclick=\"selectType('" + value.deptId + "','" + value.deptName + "')\">" + value.deptName + "</a></li>";
                            $("#" + "deptId" + value.parentId).next().append(result);
                        } else {
                            console.log(value.level)
                            var result = "<li class=\"dropdown-submenu\"><a tabindex=\"-1\" id=\"deptId" + value.deptId + "\" href=\"javascript:;\">" + value.deptName + "</a><ul class=\"dropdown-menu\"></ul></li>";
                            $("#" + "deptId" + value.parentId).next().append(result);
                        }
                    }
                });
            }
        }
    }

    //点击后操作
    function selectType(typeId, typeName) {
        $("#deptIdNew").html(typeName)
       $("#deptId").val(typeId)

        //选择分类后操作
        console.info("typeId:" + typeId);
        console.info("typeName:" + typeName);
    }

解释一下解释js


后台给前端返回的样式
[
{
childFlag: 1 ，id//是否有孩子 0否1是
deptId: 100， //id
deptName: “医学院” ，//展示名称
level: 1 ，//第几层
parentId: 0 //父级id
},{
childFlag: 1 ，id//是否有孩子 0否1是
deptId: 101， //id
deptName: “教研室” ，//展示名称
level: 2 ，//第几层
parentId: 100 //父级id
}
]

加油