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> < ...
随机推荐
- Codeforces Round #460 (Div. 2) ABCDE题解
原文链接http://www.cnblogs.com/zhouzhendong/p/8397685.html 2018-02-01 $A$ 题意概括 你要买$m$斤水果,现在有$n$个超市让你选择. ...
- P1012 拼数 字符串
题目描述 设有nn个正整数(n≤20)(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3n=3时,33个整数1313,312312,343343联接成的最大整数为:34331213 ...
- Could not find result map XXX 解决办法
错误定位在xml文件中 resultmap类型不匹配
- 进程，线程，协程，io多路复用 总结
并发:要做到同时服务多个客户端,有三种技术 1. 进程并行,只能开到当前cpu个数的进程,但能用来处理计算型任务 ,开销最大 2. 如果并行不必要,那么可以考虑用线程并发,单位开销比进程小很多 线程: ...
- HDU 5592 ZYB's Game 【树状数组】+【二分】
<题目链接> 题目大意: 给你一个由1~n,n个数组成的序列,给出他们每个的前缀逆序数,现在要求输出这个序列. 解题分析: 由前缀逆序数很容易能够得到每个数的逆序数.假设当前数是i,它前面 ...
- 实现简单的web框架
实现简单的web框架 流程: 服务端启动---服务端等待请求---客户端访问---服务端响应请求 代码: from wsgiref.simple_server import make_server # ...
- hash碰撞POC
hash碰撞POC: 该类型漏洞POC编写过程难点有二: 一. hash碰撞数据的产生或收集 二. 使用responseTime来判断是否存在hash,如何精确的得到 三. 如何估算出服务器的处理/响 ...
- kafka-manager配置和使用
kafka-manager配置 最主要配置就是用于kafka管理器状态的zookeeper主机.这可以在conf目录中的application.conf文件中找到. kafka-manager.zkh ...
- 读取XML文件内容
myeclipse中类的格式 上面中的RunMain.java为程序执行的入口,JdbcUtil.java为实体类,XmlDocumentUtil.java执行解释xml文件与获取里面的属性,程序所需 ...
- c++ <vector>学习
https://www.cnblogs.com/mr-wid/archive/2013/01/22/2871105.html 具体参考上面博客,很详细,也是看他的.今天c++学习200%,项目开发0% ...