多级菜单选择效果-html代码-BFW代码库

代码语言：html
所属分类：选择器
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.2.11|bootstrap-3.3.4&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["dropdowntree", "font-awesome-4.7.0/css/font-awesome.min|bootstrap.3.3.4|dropdowntree"], function() {


                /////////////////////////// normal user code

                var arr4 = [{
                    title: "王丽", href: "#1", dataAttrs: [{
                        title: "dataattr1", data: "value1"
                    }, {
                        title: "dataattr2", data: "value2"
                    }, {
                        title: "dataattr3", data: "value3"
                    }]},
                    {
                        title: "黄芪", href: "#2", dataAttrs: [{
                            title: "dataattr4", data: "value4"
                        }, {
                            title: "dataattr5", data: "value5"
                        }, {
                            title: "dataattr6", data: "value6"
                        }]},
                    {
                        title: "孙晓", href: "#3", dataAttrs: [{
                            title: "dataattr7", data: "value7"
                        }, {
                            title: "dataattr8", data: "value8"
                        }, {
                            title: "dataattr9", data: "value9"
                        }]}];

                var arr3 = [{
                    title: "王五", href: "#1", dataAttrs: [{
                        title: "性别", data: "value1"
                    }, {
                        title: "年龄", data: "value2"
                    }, {
                        title: "昵称", data: "value3"
                    }]},
                    {
                        title: "同事", href: "#2", dataAttrs: [{
                            title: "备注", data: "value4"
                        }, {
                            title: "人数", data: "value5"
                        }, {
                            title: "地区", data: "value6"
                        }], data: arr4
                    },
                    {
                        title: "小四", href: "#3", dataAttrs: [{
                            title: "性别", data: "value7"
                        }, {
                            title: "年龄", data: "value8"
                        }, {
                            title: "昵称", data: "value9"
                        }]}];

                var arr2 = [{
                    title: "Teriumph", href: "#1", dataAttrs: [{
                        title: "dataattr1", data: "value1"
                    }, {
                        title: "dataattr2", data: "value2"
                    }, {
                        title: "dataattr3", data: "value3"
                    }], data: arr3
                },
                    {
                        title: "Safir", href: "#2", dataAttrs: [{
                            title: "dataattr4", data: "value4"
                        }, {
                            title: "dataattr5", data: "value5"
                        }, {
                            title: "dataattr6", data: "value6"
                        }]},
                    {
                        title: "El-Hegaz Sq", href: "#3", dataAttrs: [{
                            title: "dataattr7", data: "value7"
                        }, {
                            title: "dataattr8", data: "value8"
                        }, {
                            title: "dataattr9", data: "value9"
                        }]}];



                var arr = [{
                    title: "Heliopolis", href: "#1", dataAttrs: [{
                        title: "dataattr1", data: "value1"
                    }, {
                        title: "dataattr2", data: "value2"
                    }, {
                        title: "dataattr3", data: "value3"
                    }], data: arr2
                },
                    {
                        title: "Nasr City", href: "#2", dataAttrs: [{
                            title: "dataattr4", data: "value4"
                        }, {
                            title: "dataattr5", data: "value5"
                        }, {
                            title: "dataattr6", data: "value6"
                        }]},
                    {
                        title: "Down Town", href: "#3", dataAttrs: [{
                            title: "dataattr7", data: "value7"
                        }, {
                            title: "dataattr8", data: "value8"
                        }, {
                            title: "dataattr9", data: "value9"
                        }], data: arr3
                    }];

                var options = {
                    title: "Areas 2",
                    data: arr,
                    maxHeight: 300,
                    clickHandler: function(element) {
                        //gets clicked element parents
                        console.log($(element).GetParents());
                        //element is the clicked element
                        console.log(element);
                        $("#firstDropDownTree").SetTitle($(element).find("a").first().text());
                        console.log("Selected Elements", $("#firstDropDownTree").GetSelected());
                    },
                    expandHandler: function(element, expanded) {
                        console.log("expand", element, expanded);
                    },
                    checkHandler: function(element, checked) {
                        console.log("check", element, checked);
                    },
                    closedArrow: '<i class="fa fa-caret-right" aria-hidden="true"></i>',
                    openedArrow: '<i class="fa fa-caret-down" aria-hidden="true"></i>',
                    multiSelect: true,
                    selectChildren: true,
                }

                $("#firstDropDownTree").DropDownTree(options);




                var options2 = {
                    title: "请选择好友",
                    data: arr3,
                    maxHeight: 3000,
                    clickHandler: function(element) {
                        //gets clicked element parents
                        console.log($(element).GetParents());
                    .........完整代码请登录后点击上方下载按钮下载查看