jquery 獲取當前select onchange事件
後臺代碼
@GetMapping("/add")
public String add(HttpServletRequest request, ModelMap mmap)
{
String longShortPathId = request.getParameter("longShortPathId");
String subjectId = request.getParameter("subjectId");
//當前路徑對應考季id
String seasonId = request.getParameter("seasonId");
mmap.put("seasonId",seasonId);
//獲取科目下考季列表
List<Map> seasons = baseService.getSeasonListBySubjectId(subjectId);
mmap.put("seasons",seasons);
//獲取當前路徑對應考季id下的課程列表
List<Map> courses = new ArrayList<>();
for (int i = 1; i < 10; i++) {
Map map = new HashMap(2);
map.put("courseId",i);
map.put("courseName","課程"+i);
courses.add(map);
}
mmap.put("courses",courses);
return prefix + "/add";
}
跳轉到add.html頁面
前端代碼 add.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增長短路徑拓展')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-longShortPathExtend-add">
<input type="hidden" id="courseIds" name="courseIds"/>
<input type="hidden" id="seasonIds" name="seasonIds"/>
<div class="form-group">
<label class="col-sm-3 control-label">選擇課程：</label>
<div class="col-sm-8" id="content">
<div class="child">
<div style="float: left;padding-left: 0px;" class="col-sm-6">
<select name="seasonId" class="form-control m-b " onchange="refreshCourses(this);">
<option th:each="season:${seasons}" th:selected="${season.seasonId} == ${seasonId}" th:value="${season.seasonId}"th:text="${season.seasonName}"></option>
</select>
</div>
<div style="float: left;padding-left: 0px;" class="col-sm-6" >
<select name="courseId" class="form-control m-b">
<option th:each="course:${courses}" th:value="${course.courseId}"th:text="${course.courseName}"></option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-8">
<input onclick="addCourse();" type="button" class="btn btn-w-m btn-primary" value="添加課程">
</div>
</div>
<div id="courseCont" hidden>
<div class="child">
<div style="float: left;padding-left: 0px;" class="col-sm-6">
<select name="seasonId" class="form-control m-b" onchange="refreshCourses(this)">
<option th:each="season:${seasons}" th:selected="${season.seasonId} == ${seasonId}" th:value="${season.seasonId}"th:text="${season.seasonName}"></option>
</select>
</div>
<div style="float: left;padding-left: 0px;" class="col-sm-6">
<select name="courseId" class="form-control m-b">
<option th:each="course:${courses}" th:value="${course.courseId}"th:text="${course.courseName}"></option>
</select>
</div>
</div>
</div>
</form>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
var prefix = ctx + "project/longShortPathExtend"
$("#form-longShortPathExtend-add").validate({
rules:{
xxxx:{
required:true,
},
},
focusCleanup: true
});
function submitHandler() {
debugger
var season = "";
var course = "";
$(".child select[name='seasonId'] option:selected").each(function(){
season += $(this).val() + ",";
});
$(".child select[name='courseId'] option:selected").each(function(){
course += $(this).val() + ",";
});
$("#seasonIds").val(season);
$("#courseIds").val(course);
if ($.validate.form()) {
//$.operate.save(prefix + "/add", $('#form-longShortPathExtend-add').serialize());
}
}
//追加表格
function addCourse() {
var html = $("#courseCont").html();
$("#content").append(html);
}
//考季變動時課程刷新
function refreshCourses(element) {
var seasonId = $(element).val();
//console.log(element);
$.ajax({
type: "get",
url: prefix+"/getCourseList",
dataType: "html",
data:{
seasonId: seasonId
},
async: false,
success:function (html) {
if ($.trim(html) != "") {
$(element).parent().next().empty();
$(element).parent().next().append(html);
}
}
});
}
</script>
</body>
</html>
關注地方
附加返回html頁面方法
/**
*/
@GetMapping("/getCourseList")
public String getCourseList(HttpServletRequest request, ModelMap mmap)
{
String seasonId = request.getParameter("seasonId");
List<Map> courses = new ArrayList<>();
for (int i = 91; i < 100; i++) {
Map map = new HashMap(2);
map.put("courseId",i);
map.put("courseName","課程"+i+"_"+seasonId);
courses.add(map);
}
mmap.put("courses",courses);
return prefix + "/course";
}
對應頁面
