采用异步提交的方式实现级联下拉选择框

• 采用异步提交的方式实现级联下拉选择框

功能需求：所在部门是直接从控制器放到session里面用el取的数据，jstl循环显示，当所在部门选定之后，对应所在部门下的领导信息要都拿到并显示，所以当你上面的下拉框选择之后 ，采用异步提交的方式把所选定部门的部门号传回控制器，控制器去响应对应数据用json串的方式返回，js拿到数据进行解析显示。

两个下拉框

<tr>
            <td>所在部门：</td>
            <td>
                <select id="deptlist" name="deptno" onchange="change(this)">
                    <option value="">请选择</option>
                    <c:forEach items="${dlist}" var="item">
                        <option value="${item.deptno}">${item.dname}</option>
                    </c:forEach>
                </select>
            </td>
            <td></td>
        </tr>

        <tr>
            <td>上级领导：</td>
            <td>
                <select name="mgr" id="emplist">
                    <c:forEach items="${edlist}" var="item">
                        <option value="${item.empno}">${item.ename}</option>
                    </c:forEach>
                </select>
            </td>
            <td></td>
        </tr>

js 代码实现

function change(obj){
        //console.log(obj.value);
        var mydeptno = obj.value;
        $.ajax({
           url:"${pageContext.request.contextPath}/selectbydeptno.do",
            data:{deptno:mydeptno},
            success:function(result){
                $("#emplist").empty();
                //console.log(result);
                $.each((JSON.parse(result)), function (index, item) {
                    var id = JSON.parse(result)[index].empno;
                    var text = JSON.parse(result)[index].ename;
                    $("#emplist").append("<option value='"+id+"'>"+text+"</option>");
                });
            }});
    };

要记得导入 <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>