jquery 获取当前select onchange事件

淡淡的烟草味﹌ 2023-02-18 08:08 104阅读 0赞

### jquery 获取当前select onchange事件 ###

*   *  后台代码
     *  前端代码 add.html
     *  关注地方
     *  附加返回html页面方法

## 后台代码 ##

@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>

## 关注地方 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 1][]

## 附加返回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";
        }

对应页面  
![20200616151745319.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616151457637.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200616151601548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA=,size_16,color_FFFFFF,t_70
[20200616151745319.png]: https://img-blog.csdnimg.cn/20200616151745319.png