三级联动代码：

最新推荐文章于 2024-08-11 20:00:32 发布

賀公子

最新推荐文章于 2024-08-11 20:00:32 发布

阅读量362

点赞数 7

文章标签： java

本文链接：https://blog.csdn.net/weixin_62988345/article/details/127854219

版权

/**系别**/

private Integer did;//系别ID
private String dName;//系别名称

public Integer getDid() {
    return did;
}

public void setDid(Integer did) {
    this.did = did;
}

public String getdName() {
    return dName;
}

public void setdName(String dName) {
    this.dName = dName;
}

@Override
public String toString() {
    return "Department{" +
            "did=" + did +
            ", dName='" + dName + '\'' +
            '}';
}

/**班级**/

private Integer cid;  //班级id
private String cName;//班级名称
private int did;//系别iD


@Override
public String toString() {
    return "Classes{" +
            "cid=" + cid +
            ", cName='" + cName + '\'' +
            ", did=" + did +
            '}';
}

public Integer getCid() {
    return cid;
}

public void setCid(Integer cid) {
    this.cid = cid;
}

public String getcName() {
    return cName;
}

public void setcName(String cName) {
    this.cName = cName;
}

public int getDid() {
    return did;
}

public void setDid(int did) {
    this.did = did;
}

/**学生**/

public class Student {
    private Integer sid; //学生id
    private String  sName;//学生名称
    private int cid;//班级id

    @Override
    public String toString() {
        return "Student{" +
                "sid=" + sid +
                ", sName='" + sName + '\'' +
                ", cid=" + cid +
                '}';
    }

    public Integer getSid() {
        return sid;
    }

    public void setSid(Integer sid) {
        this.sid = sid;
    }

    public String getsName() {
        return sName;
    }

    public void setsName(String sName) {
        this.sName = sName;
    }

    public int getCid() {
        return cid;
    }

    public void setCid(int cid) {
        this.cid = cid;
    }
}

/**控制层**/

@Controller
@Component
public class linkageController {

    @Autowired
    private LinkageDao linkageDao;

    @Autowired
    private RedisTemplate redisTemplate;

    @RequestMapping("/getLinkage")
    public String getLinkage() {
        return "linkage";
    }

    @RequestMapping("/getDepartment")
    @ResponseBody
    public List<Department> getDepartment() {
        List<Department> departments = linkageDao.selectDepartment();
        System.out.println(departments);
        return departments;
    }

    @RequestMapping("/getClass")
    @ResponseBody
    public List<Classes> getClasses(@RequestParam(value = "did")Integer did) {
        List<Classes> classes = linkageDao.selectClasses(did);
        System.out.println(classes);
        return classes;
    }


    @RequestMapping("/getStudent")
    @ResponseBody
    public List<Student> getStudents(@RequestParam(value = "cid")Integer cid) {
        List<Student> students = linkageDao.selectStudents(cid);
        System.out.println(students);
        return students;
    }

/**dao层**/

@Mapper
public interface LinkageDao {
    List<Department> selectDepartment();

    List<Classes> selectClasses(Integer did);

    List<Student> selectStudents(Integer gid);
}

/**mapper层**/

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xszx.dao.LinkageDao">

    <select id="selectDepartment" resultType="com.xszx.beans.Department">
    select * from t_department
    </select>

    <select id="selectClasses" resultType="com.xszx.beans.Classes">
        select * from t_classes where did=#{did}
    </select>

    <select id="selectStudents" resultType="com.xszx.beans.Student">
        select * from t_student where cid=#{cid}
    </select>
</mapper>

/**AjaxJson传值**/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动页面</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        $(function(){
            //第一层下拉框出现
            $.ajax({
                url:"/getDepartment",
                dataType : "json",
                success:function(data){
                    console.log("检查json"+data)
                    //清空select  下拉框
                    $("#xb").children().not(":eq(0)").remove();
                    //遍历数据
                    for(var i=0;i<data.length;i++){
                        $("#xb").append("<option value="+data[i].did+">--" +data[i].dName+ "--</option>");
                    }
                }

            });

            //下拉框2
            $("#xb").change(function () {
                //获取第一个下拉框的id
                var did =  $("#xb").val();
                $.ajax({
                    url:"/getClass",
                    // type:"post",
                    data:{
                        did:did
                    },
                    dataType : "json",
                    success:function(data){
                        //清空select  下拉框
                        $("#bj").children().not(":eq(0)").remove();
                        $("#bj").children().not(":eq(0)").remove();
                        //遍历数据
                        for(var i=0;i<data.length;i++){
                            $("#bj").append("<option value="+data[i].cid+">--"+data[i].cName+"--</option>");
                        }
                    }
                });
            });




            ///下拉框3
            $("#bj").change(function () {
                var cid =  $("#bj").val();
                // alert("下拉框被改变" + id);
                $.ajax({
                    url:"/getStudent",
                    // type:"post",
                    data:{
                        cid:cid
                    },
                    dataType : "json",
                    success:function(data){
                        //清空select  下拉框
                        $("#xs").children().not(":eq(0)").remove();
                        //遍历数据
                        for(var i=0;i<data.length;i++){
                            $("#xs").append("<option value="+data[i].sid+">--"+data[i].sName+"--</option>");
                        }
                    }
                });
            });

        });



    </script>
</head>
<body><form action="" method="post">
    系
    <select id="xb" name="s1">
        <option>请选择</option>

    </select>

    班
    <select id="bj"  name="s2">
        <option>请选择</option>

    </select>

    学生
    <select id="xs" name="s3">
        <option>请选择</option>

    </select>
    <input type="submit">
</form>


</body>
</html>