layui二级下拉菜单

本文主要是介绍layui二级下拉菜单，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<script>
        layui.use(['form'],function () {
            var form = layui.form
                ,table = layui.table
                ,layer = layui.layer
                ,$ = layui.jquery
                ,dropdown = layui.dropdown;

            //获取第一个下拉的参数
            $.ajax({
                url:'/domitoryAllBuilding',
                type:'get',
                success:function (data) {
                    //alert(JSON.stringify(data));  对象转json
                    var list = eval(data)//集合转对象
                        ,option = "<option value='楼栋'>请选择楼栋</option>";
                    $.each(list,function (i,o) {  //ajax的循环
                        //循环拼接下拉菜单参数
                        option += "<option value='"+o.id+"'>"+o.title+"</option>";
                    });

                    //添加到id为dom1的下拉菜单中
                    $("#dom1").html(option);
                    form.render('select');//必须写初始化  不然不加载

                    //监听第一个表单
                    form.on('select(city1)',function (obj) {
                        //获取下拉的值
                        var city1Id = $("[name='city1']").val();

                        //获取第二个下拉的参数
                        $.ajax({
                            url:'/studentAllDomitory?id='+city1Id,
                            type:'get',
                            success:function (data) {
                                var list = eval(data) //集合转对象
                                    ,option = "<option value='公寓'>请选择公寓</option>";
                                $.each(list,function (i,o) {    //ajax的循环
                                    option += "<option value='"+o.id+"'>"+o.title+"</option>";
                                });

                                $("#dom2").html(option);//添加到id为dom1的下拉菜单中
                                form.render('select');//初始化  必须加载

                                //第二个表单监听
                                form.on('select(city2)',function (obj) {
                                    //获取下拉的值
                                    var city2Id = $("[name='city2']").val();

                                    if(city2Id=='公寓'){
                                        //加载第一个下拉
                                        load(city1Id);
                                    }else{
                                        //第二个下拉展示
                                        table.render({
                                            elem: '#demo'
                                            ,height: 312
                                            ,url: '/domitoryAllStudent?id='+city2Id //数据接口
                                            ,toolbar: '#toolbarDemo'
                                            ,defaultToolbar: ['filter', 'exports', 'print', {
                                                title: '提示',
                                                layEvent: 'LAYTABLE_TIPS',
                                                icon: 'layui-icon-tips'
                                            }]
                                            ,page: true //开启分页
                                            ,limit:2
                                            ,limits:[2,4,6]
                                            ,cols: [
                                                [ //表头
                                                    {field: 'student_ID', title: '学生Id', width:80, sort: true, fixed: 'left'}
                                                    ,{field: 'student_DomitoryID', title: '楼栋Id',hide:true, width:80,edit:true}
                                                    ,{field: 'student_Username', title: '学生账号', width:100,edit:true}
                                                    ,{field: 'student_Password', title: '密码', width:80,edit:true}
                                                    ,{field: 'student_Name', title: '学生姓名', width: 100,edit:true}
                                                    ,{field: 'student_Class', title: '班级', width: 100,edit:true}
                                                    ,{field: 'student_State', title: '状态', width: 80,edit:true}
                                                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 220}
                                                ]
                                            ]
                                        });
                                    }
                                });

                            }
                        });

                        //加载第一个下拉
                        load(city1Id);

                    });

                }
            });

            //第一个下拉展示
            function load(city1Id) {
                table.render({
                        elem: '#demo'
                        ,height: 312
                        ,url: '/domitoryAllDomitory?id='+city1Id //数据接口
                        ,toolbar: '#toolbarDemo'
                        ,defaultToolbar: ['filter', 'exports', 'print', {
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }]
                        ,page: true //开启分页
                        ,limit:2
                        ,limits:[2,4,6]
                        ,cols: [
                            [ //表头
                            {field: 'domitory_ID', title: '公寓楼层', width:100, sort: true, fixed: 'left'}
                            ,{field: 'domitory_BuildingID', title: '楼栋Id',hide:true, width:100,edit:true}
                            ,{field: 'domitory_Name', title: '公寓名称', width:100,edit:true}
                            ,{field: 'domitory_Type', title: '公寓类型', width:100,edit:true}
                            ,{field: 'domitory_Number', title: '公寓总数', width: 100,edit:true}
                            ,{field: 'domitory_Tel', title: '公寓电话', width: 100,edit:true}
                            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
                            ]
                         ]
                    });
            }

            //表格头部监听
            table.on('toolbar(test)',function (obj) {
                var city1Id = $("[name='city1']").val()
                    ,city2Id = $("[name='city2']").val();
                layEvent = obj.event;//获取点击文本的信息

                if(layEvent=='add'&&city2Id=="公寓"){
                    layer.open({
                        type:2,
                        title:"添加公寓",
                        content:"addDomitory.jsp?hid="+city1Id,
                        area:['500px', '600px'],
                        shade:0.3,
                        end:function () {
                            location.reload();
                        }
                    });
                }else {
                    layer.msg('添加学生');
                    //添加宿舍的学生
                }

            });

            //表单监听
            table.on('tool(test)',function (obj) {
                var city1Id = $("[name='city1']").val()
                    ,city2Id = $("[name='city2']").val();
                layEvent = obj.event;//获取点击文本的信息
                if(layEvent=='edit' && city2Id=='公寓'){
                    //修改公寓
                    layer.msg("修改公寓");
                }else if(layEvent=='del' && city2Id=='公寓'){
                    //删除公寓
                    layer.msg("删除公寓");
                }else if(layEvent=='del' && city2Id!='公寓'){
                    //删除学生信息
                    layer.msg("删除学生");
                }
                else{
                    //修改学生信息
                    layer.msg("修改学生");
                }
            });

        });
    </script>

这篇关于layui二级下拉菜单的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！