0
点赞
收藏
分享

微信扫一扫

Ajax实现级联下拉列表

李雨喵 2022-03-12 阅读 65

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>

以上就是,我的实现过程。

举报

相关推荐

0 条评论