SpringBoot+Thymeleaf，实现Ajax即时刷新select下拉框内容(下拉框联动刷新)

SpringBoot+Thymeleaf，实现Ajax即时刷新select下拉框内容

复选框内容联动刷新。
当第一个复选框状态发生改变时，触发ajax请求，根据复选框所选中的值，传给后台，查询该值所对应的下一个复选框中的内容参数，并返回给前台，前台对下一个复选框中的内容进行清空重写。从而实现复选框联动刷新的效果。

前台页面(下拉框部分)：

   <button onclick="selectGroup()">获取部门</button>
   <select id="selectGroup" name="selectGroup" onchange="selectRole()">
      <option>——请选择部门——</option>
   </select>
   <select id="selectRole" name="selectRole" onchange="selectPerms()">
      <option>——请选择角色——</option>
   </select>
   <ul id="selectPerms" name="selectPerms" class="list-group list-group-flush">
   </ul>

Ajax请求(以刷新角色部分为例)：

function selectRole() {
   var gid = $("#selectGroup").val();
   $.ajax({
      type:"GET",
      url:"/role.do/" + gid,
      async:true,
      success:function (data) {
         var rList = data;
         var rSelect = "<option>——请选择角色——</option>";
         for(var i = 0; i < rList.length; i++){
            rSelect += ("<option value = '"+rList[i].rid+"'>"+rList[i].rname+"</option>");
         }
         $("#selectRole").empty();
         $("#selectRole").append(rSelect);
      }
   })
}

后台响应(以角色响应为例)：

@RequestMapping(value = "/role.do/{gid}")
@ResponseBody
public List<RoleTable> getRole(@PathVariable Integer gid){
    List<RoleTable> roleTableList = roleService.getRoleByGid(gid);
    return roleTableList;
}

PS：使用 $ 表达式，记得引入jQuery