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> < ...
随机推荐
- 牛客挑战赛30 小G砍树 树形dp
小G砍树 dfs两次, dp出每个点作为最后一个点的方案数. #include<bits/stdc++.h> #define LL long long #define fi first # ...
- Ajax+PHP实现异步上传多张图片
Ajax+PHP实现异步上传多张图片 HTML代码 <!-- date: 2018-04-27 13:46:55 author: 王召波 descride: 多张图片上传 --> < ...
- BZOJ3560 DZY Loves Math V 数论 快速幂
原文链接http://www.cnblogs.com/zhouzhendong/p/8111725.html UPD(2018-03-26):蒟蒻回来重新学数论了.更新了题解和代码.之前的怼到后面去了 ...
- LOJ#6433. 「PKUSC2018」最大前缀和 状压dp
原文链接https://www.cnblogs.com/zhouzhendong/p/LOJ6433.html 题解 枚举一个集合 S ,表示最大前缀和中包含的元素集为 S ,然后求出有多少个排列是这 ...
- /bin/sh ./xxxxx.sh出现：“Syntax error: “(” unexpected”
Ubuntu/Debian为了加快开机速度,用dash代替了bash. dpkg-reconfigure dash 选择 No,取消dash即可,要重新开启dpkg-reconfigure dash选 ...
- 2013年蓝桥杯省赛C/C++A组真题解析
1.高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的 ...
- Django中的Request和Response
接触Django这么久了,从来没有好好学习关于Django中的Request和Response对象.借着文件上传下载的相关工作,现在总结一下也不错. 当一个页面请求过来,Django会自动创建一个Re ...
- Kmeans：利用Kmeans实现对多个点进行自动分类—Jason niu
import numpy as np def kmeans(X, k, maxIt): numPoints, numDim = X.shape dataSet = np.zeros((numPoint ...
- 001.Kubernetes简介
一 Kubernetes概述 Kubernetes是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部:Borg).在Docker ...
- logback中logger详解
前言 logback实践笔记 上一篇主要对root进行了实践总结,现在基于上一篇中的springboot代码环境对logback.xml中的logger来进行实践和自己遇到的坑. logger简介 ...