若依框架下拉框修改默认选中和添加
程序员文章站
2022-06-28 18:53:38
添加直接复制查询的就可以联动下拉框查询...
添加直接复制查询的就可以联动下拉框查询
修改
修改的HTML页面
<div class="form-group">
<label class="col-sm-2 control-label is-required">学生学校:</label>
<div class="col-sm-10">
<select id="school" name="sysGrade.gradeSchool" class="form-control">
<option value="">请选择学校</option>
<option th:each="s1:${school}" th:value="${s1.schoolId}" th:text="${s1.schoolName}" ></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="grade" class="form-control">
<option value="">请选择年级</option>
<option th:each="s2:${grade}" th:value="${s2.gradeId}" th:text="${s2.gradeName}" ></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="classes" class="form-control">
<option value="">请选择班级</option>
<option th:each="s3:${classes}" th:value="${s3.classesId}" th:text="${s3.classesName}" th:field="*{studentClass}"></option>
</select>
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-2 control-label">学生班级:</label>-->
<div class="col-sm-10">
<input id="studentClass" name="studentClass" th:field="*{studentClass}" class="form-control" type="hidden" required>
</div>
</div>
js方法
<script>
$(document).ready(function () {
//获取controller层的函数,进行默认选中
var schoolId = [[${schoolId1}]];
var gradeId = [[${gradeId1}]];
var classesId = [[${classesId1}]];
$("#school").val(schoolId);
$("#grade").val(gradeId);
// $("#classes").val(classesId);//这里直接用th:field直接取student的值就OK了
$("#school").change(function () {//同上面一样
// alert($("#school").val())
$.ajax({
url: ctx + "system/grade/select",
type: 'GET',
data: {
gradeSchool: $("#school").val(),
},
success:function (data) {
$("#grade").empty();
$("#grade").append("<option value=''>请选择年级</option>");
for (var i = 0; i < data.length; i++){
$("#grade").append("<option value='" + data[i].gradeId + "'>" + data[i].gradeName + "</option>");
}
}
});
});
$("#grade").change(function () {//同上面一样
$.ajax({
url: ctx + "system/classes/select",
type: 'GET',
data: {
classesGrade: $("#grade").val(),
},
success:function (data) {
$("#classes").empty();
$("#classes").append("<option value=''>请选择班级</option>");
for (var i = 0; i < data.length; i++){
$("#classes").append("<option value='" + data[i].classesId + "'>" + data[i].classesName + "</option>");
}
}
})
});
$("#classes").change(function () {//赋值给input输入框添加到数据库
$("#studentClass").val($("#classes").val());
})
})
</script>
controller层
运用的是修改取值的方法,引用谁的当然要引入谁
其他层的就不在多些,只写一个grade的
/**
* 修改公告
*/
@GetMapping("/edit/{studentId}")
public String edit(@PathVariable("studentId") Long studentId, ModelMap mmap)
{
mmap.put("student", studentService.selectStudentById(studentId));
mmap.put("school", schoolService.selectSchoolList(new SysSchool()));
//通过id进行判断并且取值,通过id进行逐层查询获取id,先向上准确查询,在向下模糊查询,默认选中在下面。
String classesId1= studentService.selectStudentById(studentId).getStudentClass();
String gradeId1 = classesService.selectClassesById(Long.parseLong(classesId1)).getClassesGrade();
String schoolId1 = gradeService.selectGradeById(Long.parseLong(gradeId1)).getGradeSchool();
//赋值让HTML页面进行接收,进行默认选中
mmap.put("classesId1",classesId1);
mmap.put("gradeId1",gradeId1);
mmap.put("schoolId1",schoolId1);
mmap.put("grade",gradeService.selectGradeById1(Long.parseLong(schoolId1)));
mmap.put("classes", classesService.selectClassesById1(Long.parseLong(gradeId1)));
return prefix + "/edit";
}
service层
gerade
public SysGrade selectGradeById(Long gradeId);
public List<SysGrade> selectGradeById1(Long gradeSchool);
public List<SysGrade> selectGradeList(SysGrade grade);
serviceImpl层
grade
@Override
public SysGrade selectGradeById(Long gradeId)
{
return gradeMapper.selectGradeById(gradeId);
}
@Override
public List<SysGrade> selectGradeById1(Long gradeSchool)
{
return gradeMapper.selectGradeById1(gradeSchool);
}
@Override
public List<SysGrade> selectGradeList(SysGrade grade)
{
return gradeMapper.selectGradeList(grade);
}
mapper层
grade
public SysGrade selectGradeById(Long gradeId);
public List<SysGrade> selectGradeById1(Long gradeSchool);
public List<SysGrade> selectGradeList(SysGrade grade);
mapper.xml
添加
HTML页面
<div class="form-group">
<label class="col-sm-2 control-label is-required">学生学校:</label>
<div class="col-sm-10">
<select id="school" name="sysGrade.gradeSchool" class="form-control">
<option value="">请选择学校</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="grade" name="sysClasses.classesGrade" class="form-control">
<option value="">请选择年级</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="classes" name="studentClass" class="form-control">
<option value="">请选择班级</option>
</select>
</div>
</div>
js方法
<script type="text/javascript">
$(document).ready(function() {//页面加载时运行此函数 放在最前端
$.ajax({
url: ctx + "system/school/select",
type: 'GET',
success:function (data) {
<!--清空下拉框中的缓存-->
$("#school").empty();
<!--避免下拉框的值不变-->
$("#school").append("<option value=''>请选择学校</option>");
<!--使用循环解析后端传来的数据,并用使用js动态拼接html语言-->
for (var i = 0; i < data.length; i++){
$("#school").append("<option value='" + data[i].schoolId + "'>" + data[i].schoolName + "</option>");
}
}
});
$("#school").change(function () {//同上面一样
// alert($("#school").val())
$.ajax({
url: ctx + "system/grade/select",
type: 'GET',
data: {
gradeSchool: $("#school").val(),
},
success:function (data) {
$("#grade").empty();
$("#grade").append("<option value=''>请选择年级</option>");
for (var i = 0; i < data.length; i++){
$("#grade").append("<option value='" + data[i].gradeId + "'>" + data[i].gradeName + "</option>");
}
}
});
});
$("#grade").change(function () {//同上面一样
$.ajax({
url: ctx + "system/classes/select",
type: 'GET',
data: {
classesGrade: $("#grade").val(),
},
success:function (data) {
$("#classes").empty();
$("#classes").append("<option value=''>请选择班级</option>");
for (var i = 0; i < data.length; i++){
$("#classes").append("<option value='" + data[i].classesId + "'>" + data[i].classesName + "</option>");
}
}
})
});
})
</script>
本文地址:https://blog.csdn.net/weixin_45853881/article/details/110120792
上一篇: 水稻什么时候种植?水稻什么时候成熟收割?
下一篇: JAVA基础学习博客