jquery 获取当前select onchange事件

六月的雨在Tencent

发布于 2024-03-28 20:38:27

790

发布于 2024-03-28 20:38:27

文章被收录于专栏：CSDNCSDN

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";
    }

对应页面