实现多级下拉框联动获取数据

很多时候我们需要从数据库获取下拉列表的数据，比如：

上面的例子中，会根据区的变化，会从数据库中获取对应区中的所有街道，此时需要弄清楚区和街对应的映射关系

区的实体类：

public class District {
    private int id;
    private String name;
    private List streets;

街的实体类：

public class Street {
    private int id;
    private String name;
    private District district;

对应的两个DAO层需要的主要方法如下

public interface StreetDao {
    //根据id查找街道
    public Street findById(int id);
    //根据地区查询所有街道的方法
    public List findByDistrict(int dId);
}

public interface DistrictDao {
    public District findById(int id);//根据id查找区
    public List findAll();//查询所有区
}

从实体类中可以看到，这两个类之间存在双向关联关系，对于区来说，与街道是一对多的映射关系。对于街道来说则是多对一的映射关系。所以两个在mybatis的两个映射文件中的resultMap节点应该是这样的配置：

   
        
        
        
        

        
        
        
        
        

关键在于控制器，首先需要获取去的对象，然后根据这个区对象再查询出所有对应该区的街道集合

//处理区街信息的方法
    @RequestMapping(value="/qujie")
    public void QuJie(HttpServletRequest request , HttpServletResponse response){
        DistrictBiz dbiz=new DistrictBizimp();
        //获取选中的区
        String dId=request.getParameter("dId");
        if(dId!=null){
            //根据选中的区的id取出该区对象
            District district=dbiz.findById(Integer.parseInt(dId));
            //根据区对象获取所有街道,并封装到集合中
            List slist=district.getStreets();
            //把封装街数据的集合转为json对象
            try {
                JsonConfig jsonConfig = new JsonConfig();
                jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
                jsonConfig.addIgnoreFieldAnnotation(District.class);
                JSONObject jsonObject=new JSONObject();
                //JSONArray jsonArray=JSONArray.fromObject(slist);
                JSONArray jsonArray =JSONArray.fromObject(slist, jsonConfig);
                jsonObject.put("street", jsonArray);
                String result = jsonObject.toString();
                response.getWriter().write(result);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

最后使用ajax把控制器中的json对象接手过来显示到页面就可以啦！

function change() {
        $.getJSON(
            "house/qujie",
            {dId:$("#district").val()},
            function(data){
                document.getElementById("streets").options.length=0;
                for(var i=0;i<=data.street.length;i++){
                    $("#streets").append(""
                    +data.street[i].name+"");
                }
            }
        );
    }