jquery 获取当前select onchange事件

简介: jquery 获取当前select onchange事件

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>


关注地方

image.png

image.png

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

对应页面

image.png


相关文章
|
5月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
32 1
|
12天前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
11 0
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
jQuery 事件
jQuery 事件
37 10
|
2月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
32 3
|
2月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
15 0
|
3月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
JavaScript
jQuery多级联动美化版Select下拉框
在线演示 本地下载
1262 0
|
JavaScript 索引
jQuery操作select下拉框的text值和value值的方法
1、jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2、jquery获取当前选中select的value值 $("#select1").
1156 0