jqeury-地区三级联动

html+js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </head>

 <body>
     <div class="jumbotron">
      <div class="container">  
        <div class="form-group" id="mychart1-dq">
         <label for=""  class="col-sm-2 control-label">省份名称：</label>
         <div class="col-sm-2" style="padding-bottom: 5px;">
                <select class="form-control" name="PROVINCE_ID" id="PROVINCE_ID">
                    <option value=''>请选择...</option>
                </select>
         </div>
         <label for=""  class="col-sm-2 control-label">县市名称：</label>
         <div class="col-sm-2" style="padding-bottom: 5px;">
                <select class="form-control" name="PREFECTURE_ID" id="PREFECTURE_ID">
                    <option value=''>请选择...</option>
                </select>
         </div>
         <label for=""  class="col-sm-2 control-label">乡村名称：</label>
         <div class="col-sm-2" style="padding-bottom: 5px;">
                <select class="form-control" name="TOWNSHIP_ID" id="TOWNSHIP_ID">
                    <option value=''>请选择...</option>
                </select>
         </div>
      </div>
      </div>
    </div>
 </body>
</html>
    <script type="text/javascript" >  
    //省市三级联动
$(function(){
    $("#dqjz").each(function(){
        var url = reqprojectname_w+'infofind/findDq';
        var dzJson;
        var dz_html="";
        var oDzlx = $("#PROVINCE_ID");
        var oYkzl = $("#PREFECTURE_ID");
        var oYkzl2 = $("#TOWNSHIP_ID");
        //console.log(dzJson);
        var dzlx = function(){
            if( typeof(dzJson) == "undefined" || dzJson.length == 0  ){
                dz_html+="<option value=''>请选择...</option>";
            }else{
                $.each(dzJson,function(i,v){
                        dz_html+="<option value='"+v.k+"' >"+v.n+"</option>";
                });
            }
            oDzlx.html(dz_html);
            ykzl();
        };
        var ykzl = function(){
            dz_html = ""; 
            var n = oDzlx.get(0).selectedIndex;
            if( typeof(dzJson) == "undefined" || typeof(dzJson[n]) == "undefined" ||typeof(dzJson[n].list) == "undefined" ){
                dz_html+="<option value=''>请选择...</option>";
            }else{
                $.each(dzJson[n].list,function(i,v){
                        dz_html+="<option value='"+v.k+"'>"+v.n+"</option>";
                });
            }
            oYkzl.html(dz_html);
            ykzl2();
        };
        //赋值县
        var ykzl2 = function(){
            dz_html = ""; 
            var m = oDzlx.get(0).selectedIndex;
            var n = oYkzl.get(0).selectedIndex;
            if(typeof(dzJson[m]) == "undefined" || typeof(dzJson[m].list[n]) == "undefined" || typeof(dzJson[m].list[n].list) == "undefined"){
                dz_html+="<option value=''>请选择...</option>";
            }else{
                $.each(dzJson[m].list[n].list,function(i,v){
                        dz_html+="<option value='"+v.k+"'>"+v.n+"</option>";                
                });
                oYkzl2.html(dz_html);
            };
        };
        oDzlx.change(function(){
            ykzl();
        });
        oYkzl.change(function(){
            ykzl2();
        });
        //获取json数据
        $.getJSON(url,function(data){
            //地区
            dzJson = data.list;
            dzlx();
        });
    });
    
});



    </script>

 

java接口数据处理

    /**
     * 加载地区
     * @param req
     * @param res
     */
    @RequestMapping("findDq")
    public void findDq(HttpServletRequest req, HttpServletResponse res) {
        Map<String,Object> map = new HashMap<String, Object>();
        
        JvmInfo jvm = JvmInfo.getIntence();
        List<KeyAndValue> list = jvm.getDqList();
        if( list == null || list.isEmpty()){
             list = new ArrayList<KeyAndValue>();
　　　　　　　　//第三级（数据组成自行实现）
            List<DqxzmcModel> dqxzListModel = dqxzmcService.findList();
            Map<Integer, List<KeyAndValue>> dqxzmap = new HashMap<Integer, List<KeyAndValue>>();
            if(dqxzListModel != null && dqxzListModel.size()>0){
                for (DqxzmcModel d : dqxzListModel) {
                    List<KeyAndValue> dzlist = dqxzmap.get(d.getCITY_ID());
                    if( dzlist == null ){
                        dzlist = new ArrayList<KeyAndValue>();
                        dqxzmap.put(d.getCITY_ID(), dzlist);
                    }
                    KeyAndValue kv = new KeyAndValue();
                    kv.setK(d.getIdStr());
                    kv.setN(d.getTOWN_NAME());
                    dzlist.add(kv);
                }
            }
　　　　　　　　//第二级（数据组成自行实现）
            List<DqxsmcModel> dqxsListModel = dqxsmcService.findList();
            Map<Integer, List<KeyAndValue>> dqxsmap = new HashMap<Integer, List<KeyAndValue>>();
            if(dqxsListModel != null && dqxsListModel.size()>0){
                for (DqxsmcModel d : dqxsListModel) {
                    List<KeyAndValue> dzlist = dqxsmap.get(d.getPROVINCE_ID());
                    if( dzlist == null ){
                        dzlist = new ArrayList<KeyAndValue>();
                        dqxsmap.put(d.getPROVINCE_ID(), dzlist);
                    }
                    KeyAndValue kv = new KeyAndValue();
                    kv.setK(d.getIdStr());
                    kv.setN(d.getCITY_NAME());
                    List<KeyAndValue> childList = dqxzmap.get(d.getID());
                    if( childList != null && childList.size()>0){
                        kv.addLists(childList);
                    }
                    dzlist.add(kv);
                }
            }
　　　　　　　　//第一级（数据组成自行实现）
            List<DqsfmcModel> dqsfLstModel = dqsfmcService.findList();
            if(dqsfLstModel != null && dqsfLstModel.size()>0){
                for (DqsfmcModel d : dqsfLstModel) {
                    KeyAndValue kv = new KeyAndValue();
                    kv.setK(d.getIdStr());
                    kv.setN(d.getPROVINCE_NAME());
                    List<KeyAndValue> childList = dqxsmap.get(d.getID());
                    if( childList != null && childList.size()>0){
                        kv.addLists(childList);
                    }
                    list.add(kv);
                }
            }
            
        }
        map.put("list", list);
        CtrlUtils.putJSON(map, res);
    }

 

posted @ 2017-06-13 17:40  243573295  阅读(331)  评论(0)  编辑  收藏  举报