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"; }
对应页面
