Ajax级联下拉列表
在学习中,要使用级联的下拉列表,可是找了很多都不够好,或者有瑕疵。
1、获取下拉列表的数据
//获取第一个下拉列表的值
@GetMapping("/newemployee")
public String tonewEmp(HttpSession session){
List<EmpDepart> depart=employeeInfService.toselectEmpDepartAll();
session.setAttribute("depart",depart);
// List<EmpJob> job=employeeInfService.toselectEmpJobAll();
// session.setAttribute("job",job);
return "admin/newemp";
}
//根据第一个下拉列表的值查询第二个列表的值,并返回。
@PostMapping("/getJob")
@ResponseBody
public List<EmpJob> togetJob(@RequestParam("departID") Integer departID){
List<EmpJob> jobList=employeeInfService.toselectJobBydep(departID);
return jobList;
}
2、ajax实现,找了很多文章,才实现
$(function () {
$("#depID").change(function () {
var value=$(this).find('option:selected').val();
$.ajax({
url : "/getJob",
async : false,
type : "POST",
data : "departID=" +value,
dataType: 'json',
cache : false,
success: function(data){
// alert(JSON.stringify(data));
var maps=JSON.parse(JSON.stringify(data));//不转换JSON.stringify(data),不知道为什么就输不出来
var length=maps.length;
$("#jID").empty();
$("#jID").prepend("<option value='0'>=====请选择====</option>");
for(var i=0;i<length;i++){
var map=maps[i];
// alert("id="+map.jobID+" departId="+map.departID+"name="+map.jobName);
$("#jID").append("<option value=\""+map.jobID+"\">"+map.jobName+"</option>");//拼接
}
}
});
});
});
3、下拉列表
<tr>
<td>部门:</td>
<td>
<select name="departID" id="depID">
<option value="0">=====请选择=====</option>
<option th:each="departInf:${session.depart}" th:value="${departInf.departID}"
th:text="${departInf.departName}"></option>
</select>
</td>
</tr>
<tr>
<td>岗位:</td>
<td>
<select name="jobID" id="jID">
<option value="0">=====请选择=====</option>
</select>
</td>
</tr>
以上就是,我的实现过程。