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);

    }

jqeury-地区三级联动的更多相关文章

非常不错的地区三级联动，js简单易懂。封装起来了
首先需要引入area.js,然后配置并初始化插件: 例:  <script src="js/area.js"></sc ...
angular实现地区三级联动
<!DOCTYPE html><html ng-app="myapp"> <head> <meta charset="UTF-8 ...
ajax+struts2 实现省份-城市-地区三级联动
1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结 ...
PHP+AJAX 地区三级联动代码
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
使用Yii2中dropdownlist实现地区三级联动的例子
原文:http://www.yiichina.com/code/636 <?php use yii\helpers\Url; use yii\widgets\ActiveForm; use yi ...
vue移动端地址三级联动组件(一)
vue移动端地区三级联动省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...
JAVA EE 中之AJAX 无刷新地区下拉列表三级联动
JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
微信小程序地区选择器和省市县三级联动和button按钮分享
wxml代码: <view class="section__title"> 地区选择器 </view> <picker bindchange=&quo ...
用php和ajax写一个省市区的三级联动，实现地区的下拉选择
要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...
easyUI下拉列表三级联动
首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...

随机推荐

ifconf家族命令
1 ifconfig 命令: ifconfig 命令用来查看和配置网络设备.当网络环境发生改变时可通过此命令对网络进行相应的配置. 查看: ifconfig : 显示正在激活中的网卡 ifconfi ...
BZOJ3561 DZY Loves Math VI 数论快速幂莫比乌斯反演
原文链接http://www.cnblogs.com/zhouzhendong/p/8116330.html UPD(2018-03-26):回来重新学数论啦.之前的博客版面放在更新之后的后面. 题目 ...
Python scrapy爬虫学习笔记01
1.scrapy 新建项目 scrapy startproject 项目名称 2.spiders编写(以爬取163北京新闻为例) 此例中用到了scrapy的Itemloader机制,itemloade ...
jenkins+springboot+svn linux 自动化部署
需要下载 publish over ssh 插件(远程上传项目到服务器) Maven Integration plugin 插件(构建maven项目) 然后将各种配置配置好最终项目在服务器上的路径是 ...
002.Ceph安装部署
一前期准备 1.1 配置规格节点类型 IP CPU 内存 ceph-deploy 部署管理平台 172.24.8.71 2 C 4 G node1 Monitor OSD 172.24.8.72 ...
BZOJ-4-2038: [2009国家集训队]小Z的袜子(hose)-莫队
思路 :分块思想处理离线查询操作对查询进行排序在同一块内的按照 r 进行排序不同块的按照 L进行排序. #include<bits/stdc++.h> using names ...
Pandas 学习记录(一)
1.DataFrame 按照列和按照行进行索引数据按照列索引 df[’column_name’] 按照行索引 df.loc[’row_key’] 或 df.iloc[index] 2.先行后列索引单 ...
xml模块、项目开发过程
一.XML模块 xml指的是可扩展标记语言,是一种定义电子文档结构和描述的语言,可以用来标记数据.定义数据类型. 什么时候用xml? 当需要自定义文档结构时,使用xml.在java中经常会使用xml来 ...
JAVA导入表格功能总结
表格结构: SheetName:sheet名称(辅材采购申请单) RowNum:行数 FirstCellNum/LastCellNum:第一竖列/最后一竖列(从0开始),例:getCell(0) = ...
1099 Lottery
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1099 英文水平太差了,题目实在是不知道是什么意思,然后看了其他高手写的思路,才看明白. 题意,收集n张彩票 ...

jqeury-地区三级联动

jqeury-地区三级联动的更多相关文章

随机推荐

热门专题