美文网首页Java学习笔记
Ajax实现二级(多级)联动

Ajax实现二级(多级)联动

作者: Eugene1024 | 来源:发表于2018-08-20 14:33 被阅读3次
二级联动效果

开发中经常会遇到一些二级联动甚至多级联动,一二级菜单,省市县,公司团队部门等等

实现思路

一级菜单

就是个多option 的select下拉框,option可以来自页面自定义或则数据库

二级菜单

当一级菜单选中后,去查询数据库,查询到对应的二级菜单的内容,使用apend()添加到二级菜单的位置,一二级菜单就实现了联动,下面以部门和部门人员的联动为例介绍下

实际实现

onchange="showDept(this.value)"

一级菜单选择改变触发请求

        function showDept(obj)  
        {  
            var dept = obj;           
            $.ajax({  
                type: "post",    
                url: "erji.jsp",    
                data: "dept="+dept,  
                async: false,  
                success: function(data){ 
                    $("#xingming option").remove()
                    var result=data.split("#");
                    for(var i=0;i<result.length;i++){
                        $("#xingming").append(result[i]);  
                    }
                }     
            });    

前端请求到后端,后端请求数据库二级菜单的内容,并返回给页面显示

        String te = request.getParameter("dept");
        String s = "select id,realname from user where dept = '" + te + "'";
        Statement stmt = db.getConnection().createStatement();
        rs = stmt.executeQuery(s);
        String temp = "<option>请选择</option>#";
        while (rs.next()) {
            temp = temp + "<option value=" + rs.getString("id") + ">" + rs.getString("realname") + "</option>#";
        }
        out.println(temp);

思考

当一级菜单选中之后又不选中,二级菜单的处理规则是怎么样的?
选择之后,点击查询后页面如何记住查询条件的呢?

当一级菜单选中之后有可能还是会选择二级菜单,这时候一级菜单不选中,还是需要请求后端重置二级菜单实现一二级联动
将选中的一二级菜单值传到页面设置选中即可(可使用JS)

多级联动同二级联动

相关文章

网友评论

    本文标题:Ajax实现二级(多级)联动

    本文链接:https://www.haomeiwen.com/subject/txhxsftx.html