先从后台查询到第一个局的数据，封装到model中并转发到前台

 @RequestMapping(value = "/toPie")
    public String  toShow(Model model){
        List<Area> list = areaService.showArea_Ju();
        model.addAttribute("list",list);
        return "forward:/pie.jsp";
    }

 

第二个段需要通过改变局来触发ajax 查询该局下面的段（注意:局中第一个数据从上面方法转发过来就已经触发，所以加载页面的时候必须查出改局下面的段，也就是下面script中的a()方法）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <%@ include file="/include/easyui.jsp"%>
    <script type="text/javascript" src="${pageContext.request.contextPath }/jQuery/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="checkBox">
    局:
    <select id="ju"   onSelect="juToDuan()">
        <c:forEach items="${list}" var="ju">
            <option value="${ju.id}">${ju.name}</option>
        </c:forEach>
    </select>
    <script type="text/javascript">
        //修改段（清空所并查询）
        function duanToSuo1(id_duan) {

            $('#suo').empty();
            $.ajax({
                type:"GET",
                data:{"id":id_duan},
                url:"${pageContext.request.contextPath}/area/duanToSuo.action",
                success:function(data){
                    $.each(data,function(i,n){
                        //alert(n.id +""+n.name);
                        var id = n.id;
                        var name = n.name;
                        var suo = $("#suo");//根据id获取select的jquery对象
                        suo.append('<option value="'+id+'">'+name+'</option>');//添加option
                    })
                }
            })
        }
        //修改局（段和锁都要重新获取到）
        function  juToDuan() {
            var option_ju = $("#ju option:selected");
            var id_ju = option_ju.val();
            $('#duan').empty();
            $('#suo').empty();
            $.ajax({
                type:"GET",
                data:{"id":id_ju},
                url:"${pageContext.request.contextPath}/area/juToDuan.action",
                success:function(data){
                    $.each(data,function(i,n){
                        //alert(n.id +""+n.name);
                        if(i==0){
                            var  id_duan = n.id;
                            duanToSuo1(id_duan);
                         }
                        var id = n.id;
                        var name = n.name;
                        var duan = $("#duan");//根据id获取select的jquery对象
                        duan.append('<option value="'+id+'">'+name+'</option>');//添加option
                    })
                }
            })
        }
    </script>
    段:
    <select id="duan" onSelect="duanToSuo()" >
    </select>
    <script type="text/javascript">
        function duanToSuo(){
            var option_duan = $("#duan option:selected");
            var id_duan= option_duan.val();
            duanToSuo1(id_duan);
        }
    </script>
    所:
    <select id="suo"  >
    </select>


</div>
</body> </html>

ajax跳转的后台代码

@Controller
@Transactional
@RequestMapping("/area")
public class AreaController {
    @Resource
    AreaService areaService;

    @RequestMapping(value = "/juToDuan")
    @ResponseBody
    public List<Area> juToDuan(String id){
        List<Area> list = areaService.juToDuan(id);
        return list;
    }
}