• 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); }
  • 相关阅读:
    搭建SpringCloud之注册中心Eureka
    学习角色管理模块错误总结---基于SpringMVC框架
    【转】Eclipse 单步调试
    [转]MyBatis的foreach语句详解
    解决pom.xml文件 ---- web.xml is missing and <failOnMissingWebXml> is set to true
    解决Dynamic Web Module 3.0 Requires Java 1.6 or newer
    用maven在eclipse用spring建javaweb工程(一)
    【转载】Eclipse 断点调试
    学习大神笔记之“MyBatis学习总结(三)”
    学习大神笔记之“MyBatis学习总结(二)”
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/7002555.html
Copyright © 2020-2023  润新知