mvc实现动态二级联动

进去页面controller

@RequestMapping("toInsurance")
    public String toInsurance(Model model) {
        List<Insurance> insurances = insuranceService.queryAll();
        if (insurances != null) {
            model.addAttribute("insurances", insurances);
        }
        return "pageTable/Insurance";
    }

页面接收

<tr>
                <td>
                    <select id="insurance"  name="insurance" onchange="change()">
                        <option value="">请选择所在服务组</option>
                        <c:forEach items="${insurances}" var="insurance">
                            <c:if test="${insurance.driver!=null}">
                                <option value="${insurance.id}">${insurance.name}</option>
                            </c:if>
                        </c:forEach>
                    </select>
                </td>
            </tr>

事件请求

function change(){
        var id = $("#insurance").val();
        $.post("${pageContext.request.contextPath}/insurance/queryInsuranceById",{"id":id},function (data) {
            var obj = document.getElementById("serv");
            obj .innerHTML = "<option value=''>——请选择——</option>";
            if (data!= null)
                for(var i=0;i<data.length;i++){
                    var id = data[i].id;
                    var ip = data[i].ip;
                    obj .innerHTML =  obj .innerHTML + "<option value='"+id+"'>"+ip+"</option>";
                }
            }
        });
    }

请求到controller

@RequestMapping(value = "queryInsuranceById",method = RequestMethod.POST,produces = "application/json;charset=utf-8")
    @ResponseBody
    public String queryInsuranceById(Integer id)throws Exception {
    //第二级数据list
        List<InsuranceServer> insuranceServers = insuranceServerService.queryAllById(id);
        return JSONArray.toJSONString(insuranceServers);
    }

返回给data， 展示到页面

			<tr>
                <td>
                    <select id="serv" name="serv" style="width: 232px;height: 30px;font-size: 15px" >
                        <option value="">----请--选--择----</option>
                    </select>
                </td>
            </tr>

结束