add.html页面
<div class="row">
<label class="col-xs-2 control-label">年级:</label>
<div class="col-xs-4">
<select id="agrade" >
<option value="">请选择年级</option>
</select>
</div>
</div>
<div class= " row" >
<label class="col-xs-2 control-label">班级:</label>
<div class="col-xs-4">
<select class="form-control" id="aclasses" name="cid">
<option value="">请选择班级</option>
</select>
</div>
</div>
js
$(document).ready(function() { //页面加载时运行此函数 放在最前端
/*二级*/
$.ajax({
url: ctx + "system/grade/select",
type: 'GET',
success: function (data) {
$("#agrade").empty();
$("#agrade").append("<option value=''>请选择年级</option>");
for (var i = 0; i < data.length; i++) {
$("#agrade").append("<option value='" + data[i].gid + "'>" + data[i].gname + "</option>");
}
}
});
$("#agrade").change(function () {//同上面一样
// alert($("#agrade").val())
$.ajax({
url: ctx + "system/classes/select",
type: 'GET',
data: {
gid: $("#agrade").val(),
},
success:function (data) {
$("#aclasses").empty();
$("#aclasses").append("<option value=''>请选择班级</option>");
for (var i = 0; i < data.length; i++){
$("#aclasses").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
}
}
})
});
});
GradeController 查询年级的所有返回一个list集合
@GetMapping("/select")
@ResponseBody
public List<GXGrade> select(){
List<GXGrade> list1 = gradeService.selectGradeList(new GXGrade());
return list1;
}
ClassesController 通过班级外键(gid)查找班级名称
@GetMapping("/select")
@ResponseBody
public List<GXClasses> select(Integer gid){
List<GXClasses> list1 = classesService.selectClassBid1(gid);
return list1;
}
ClassesMapper.xml

<!-- 联动 -->
<select id= "selectClassBid1" parameterType="Integer" resultMap="GXClassesResult">
<include refid="selectClassesVo" />
where aclass.gid = #{aclasses.gid}
</select>
默认修改
StudentController
edit.html页面
<div class="form-group">
<label class="col-sm-2 control-label is-required">学生年级:</label>
<div class="col-sm-10">
<select id="agrade" class="form-control">
<option value="">请选择年级</option>
<option th:each="g:${sysGrade}" th:value="${g.gid}" th:text="${g.gname}" th:field="*{gid}"></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label is-required">学生班级:</label>
<div class="col-sm-10">
<select id="aclasses" class="form-control" name="cid" >
<option value="">请选择班级</option>
<option th:each="cl:${sysClasses}" th:value="${cl.cid}" th:text="${cl.cname}" th:field="*{cid}"></option>
</select>
</div>
</div>
js
$("#agrade").change(function () {//同上面一样
$.ajax({
url: ctx + "system/classes/select",
type: 'GET',
data: {
gid: $("#agrade").val(),
},
success:function (data) {
$("#aclasses").empty();
$("#aclasses").append("<option value=''>请选择班级</option>");
for (var i = 0; i < data.length; i++){
$("#aclasses").append("<option value='" + data[i].cid + "'>" + data[i].cname + "</option>");
}
}
})
}))