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> < ...
随机推荐
- 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
CSS代码: .box { max-width: 414px; height: 480px; border: solid #000; margin: auto; overflow: auto; } . ...
- 洛谷3825 [NOI2017]游戏 2-sat
原文链接http://www.cnblogs.com/zhouzhendong/p/8146041.html 题目传送门 - 洛谷3825 题解 我们考虑到地图中x的个数很少,最多只有8个. 所以我们 ...
- 使用 PySide2 开发 Maya 插件系列三：qt语言国际化（internationalization）
使用 PySide2 开发 Maya 插件系列三:qt语言国际化(internationalization) 前言: 这是 qt for python 的语言国际化,基于 UI 的,python 也有 ...
- dubbo spring bean id冲突
service-security-provider应用有provider和consumer配置文件 其中secutrity-consumer引用两个服务 <dubbo:reference int ...
- vim 命令图解
vim 命令,vim是一个很好的编辑工具,下面为大家介绍一下vim入门基本命令. 方法/步骤 1 [vim 命令-启动vimtutor]:执行命令:vimtutor.vimtutor是vim使用入 ...
- Codeforces 1037D【BFS】
<题目链接> 题目大意: 给你一颗树的所有边,这些边是无向的,然后给你一段BFS序列,BFS都以1为根节点,判断这段BFS序列是否合法. 解题分析: 就是模拟BFS,某个父亲节点的所有子节 ...
- type__元组、字典、集合
- Codeforces.1096E.The Top Scorer(组合)
题目链接 感觉这题很裸啊,除了看着恶心点也没什么了,怎么过的人那么少.. \(Description\) 给定\(n,r,s\),表示有\(n\)个人,设每个人的得分是非负整数\(a_i\),已知第一 ...
- 51Nod.1766.树上最远点对(树的直径 RMQ 线段树/ST表)
题目链接 \(Description\) 给定一棵树.每次询问给定\(a\sim b,c\sim d\)两个下标区间,从这两个区间中各取一个点,使得这两个点距离最远.输出最远距离. \(n,q\leq ...
- Python快速入门
Python快速入门 一.基础概要 命名:h.py Linux命令行运行:python h.py 注释.数字.字符串: 基本类型只有数字与字符串 #python注释是这样写的 ''' 当然也可以这样 ...