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> < ...
随机推荐
- XXX系统项目目标文档课堂讨论
XXXX重大技术征集系统 1.讨论结果: 2.项目目标文档 A目标: 1. 实现普通用户在线需求填报,个人信息管理,需求结果查看. 2. 实现审核员用户的需求审核,需求查看浏览和生成图表结果. 3. ...
- python面试题之Python是如何进行内存管理的
python内部使用引用计数,来保持追踪内存中的对象,Python内部记录了对象有多少个引用,即引用计数,当对象被创建时就创建了一个引用计数,当对象不再需要时,这个对象的引用计数为0时,它被垃圾回收. ...
- Hdu-2008
杭电OJ-2008 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2008 #include<stdio.h> int main() { i ...
- 1402 后缀数组 （hash+二分）
描述 后缀数组 (SA) 是一种重要的数据结构,通常使用倍增或者DC3算法实现,这超出了我们的讨论范围.在本题中,我们希望使用快排.Hash与二分实现一个简单的 O(n log^2n ) 的后缀数组 ...
- datatables跳转自定义页面（后端分页）
在后端分页的情况下,怎么做到跳转自定义页面? 0x01 难点: 一. 怎么添加自定义代码? 前提:datatables在整个html加载完毕后,进行datatables数据的渲染,并且把右下角的 “上 ...
- [ 严重 ] my系统核心数据库sql注入
某网注入 注入点 : xxx.maoyan.com/xxxager.php username存在注入 POST: adminLogin=XX&username=-1&userpwd=X ...
- url两次编码
encodeURI函数采用UTF-8对URL进行编码,所以如果服务器在进行解码时使用的是其他的编码方式就会出现乱码,默认的服务器配置的解码字符集都不是UTF-8,所以大部分情况下地址栏提交中文查询参数 ...
- SPOJ COT3.Combat on a tree(博弈论 Trie合并)
题目链接 \(Description\) 给定一棵\(n\)个点的树,每个点是黑色或白色.两个人轮流操作,每次可以选一个白色的点,将它到根节点路径上的所有点染黑.不能操作的人输,求先手是否能赢.如果能 ...
- 关于linux kernel slab内存管理的一点思考
linux kernel 内存管理是个很大的话题,这里记录一点个人关于slab模块的一点思考总结. 有些书把slab介绍成高速缓存,这会让人和cache,特别是cpu cache混淆,造成误解.sla ...
- SpringMVC url匹配却404，SimpleUrlHandlerMapping不起作用
代码如下: <mvc:default-servlet-handler/> <bean class="org.springframework.web.servlet.hand ...