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> < ...
随机推荐
- 关闭PHP的opcache缓存
1.使用phpinfo();查看配置信息 2.搜索Additional .ini files parsed 3.查看opcache安装目录 4.打开文件将 opcache.enable=1 改成 ...
- 51Nod1863 Travel 主席树 最短路 Dijkstra 哈希
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1863.html 题目传送门 - 51Nod1863 题意 有 n 个城市,有 m 条双向路径连通它们 ...
- web发展阶段简介
web1.0.web2.0和web3.0的区别前言: 其实并没有什么所谓的2.0.3.0,因为你没法准确的界定它是什么样的应用,也没法界定它是什么时候开始的,什么时候结束,它只是互联网本身发展的一种 ...
- day33 网络编程之线程,并发以及selectors模块io多路复用
io多路复用 selectors模块 概要: 并发编程需要掌握的知识点: 开启进程/线程 生产者消费者模型!!! GIL全局解释器锁(进程与线程的区别和应用场景) 进程池线程池 IO模型(理论) 1 ...
- sql查询一个字段不同值并返回
sql SELECT COUNT(字段),分组字段,SUM(字段),SUM(字段) FROM 表 GROUP BY 分组字段 java EntityWrapper<ProjectEntity&g ...
- Python 获取计算机全名（fully qualified host name）
Python 获取计算机全名(fully qualified host name) import socket socket.getfqdn() socket.gethostname()
- POJ 3061 Subsequence【二分答案】||【尺取法】
<题目链接> 题目大意: 给你一段长度为n的整数序列,并且给出一个整数S,问你这段序列中区间之和大于等于S的最短区间长度是多少. 解题分析:本题可以用二分答案做,先求出前缀和,然后枚举区间 ...
- Mybatis之延迟加载机制
1. 延迟加载的含义: 用到的时候才会去进行相关操作 2. 延迟加载的例子: 2.1 spring的BeanFactory,在getBean()的时候才创建Bean 2.2 物理分页查询,只有点击 ...
- vue组件通信那些事儿
一.说说通信 通信,简言之,交流信息.交流结束后,把信息放在哪里,这是一个值得思考的问题.vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性. 1.用state的场景 ...
- 关于ugc的一点思考
ugc会使互联网繁荣,但依赖大众用户创造的内容质量上会存在参差不齐,这是ugc本身存在的问题. 就拿技术论坛或社区来说,好的内容不少,但质量不好的内容也很多.社区在引导用户发言的同时,也应 对用户创造 ...