//Java部分代码

public String province() throws Exception {
List<Province> list=cityBiz.showProvince();//省份对象集合
//解析集合用的方法
JSONArray json=JSONArray.fromObject(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
PrintWriter out=null;
try {
out=response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
//将省份的json字符串响应给jquery的ajax
out.print(json.toString());
out.close();
return null;
}

public String city() throws Exception {
String pid=request.getParameter("pid");

//根据选择的省份去查询对应的城市对象集合
List<City> list=cityBiz.showCity(pid);
JSONArray json=JSONArray.fromObject(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
try {
out = response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
//将城市的json字符串响应给jquery的ajax
out.print(json.toString());
out.close();
return null;
}

public String district() throws Exception {
String cid=request.getParameter("cid");

//根据选中的城市拿到对应的区域对象集合
List<District> list=cityBiz.showDistrict(cid);
JSONArray json=JSONArray.fromObject(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
try {
out = response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
//将区域的json字符串响应给jquery的ajax
out.print(json.toString());
out.close();
return null;
}

2、JS和HTML代码

<script type="text/javascript">
$(function(){
　　$.ajax({
　　type:"post",
　　url: "testAction!province?time="+Math.random(),
　　dataType:"json",//指定返回的格式
　　success:function(data){
　　for(var i=0;i<data.length;i++){
　　　　var pid=data[i].pid//返回对象的一个属性
　　　　var pname=data[i].pname;
　　　　$("<option value='"+pid+"'>"+pname+"</option>").appendTo($("#pid"));//添加下拉列表
　　}
}
});

$(function(){
　　$("#pid").change(function(){
　　//清空下面两个子下拉列表(option中value值大于0的删除)
　　$("#cid option:gt(0)").remove();
　　$("#did option:gt(0)").remove();

　　if($("#pid").val()==-1){
　　return;//没有选择的就不去调用
}
//使用post方式
$.post(
　　　　"testAction!city?time="+Math.random(),
　　　　{"pid":$("#pid").val()},//参数
　　　　function(data){
　　　　for(var i=0;i<data.length;i++){
　　　　var cid=data[i].cid;
　　　　var cname=data[i].cname;
　　　　$("<option value='"+cid+"'>"+cname+"</option>").appendTo($("#cid"));//添加下拉列表
　　}
},
　　"json"//指定返回类型
　　);
});
});

$(function(){
　　$("#cid").change(function(){
　　$("#did option:gt(0)").remove();
　　if($("#cid").val()==-1){
　　　　return;
　　}
　　$.getJSON(//这种访问方式返回的就是JSON格式数据
　　"testAction!district?time="+Math.random(),
　　{"cid":$("#cid").val()},
　　function(data){
　　　　for(var i=0;i<data.length;i++){
　　　　var did=data[i].did;
　　　　var dname=data[i].dname;
　　　　$("<option value='"+did+"'>"+dname+"</option>").appendTo($("#did"));
　　}
}
);
});
});
});
</script>
<body>
　　省份:<select id="pid">
　　<option value="-1">请选择</option>
　　</select><br>
　　城市:<select id="cid">
　　<option value="-1">请选择</option>
　　</select><br>
　　区域:<select id="did">
　　<option value="-1">请选择</option>
　　</select><br>
</body>

Jquery省市区三级联动案例的更多相关文章

  1. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  2. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  3. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

  4. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  5. jQuery省市区三级联动菜单

    <style> select{ padding:5px 0; } .outer{ width:500px; margin:20px auto; } </style> <d ...

  6. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  7. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  8. 省市区三级联动[JSON+Jquery]

    <!DOCTYPE html><head> <title>省市区三级联动[JSON+Jquery]</title> <script src=&qu ...

  9. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

随机推荐

  1. HDU 1540 Tunnel Warfare 平衡树 / 线段树：单点更新，区间合并

    Tunnel Warfare                                  Time Limit: 4000/2000 MS (Java/Others)    Memory Lim ...

  2. mysql 怎样清空一个数据库中的所有表

    转自:http://blog.csdn.net/zhangzhizhen1988/article/details/8432146 MySQL清空表是很重要的操作,也是最常见的操作之一,下面就为您详细介 ...

  3. svn代码提交注意事项

    先全部add,查看是否有gen和bin,然后再忽略这两个,忽略时选择最后rescury....

  4. Liferay 6.2 改造系列之六：修改系统初始化信息

    将初始化过程修改为:中文语言 在/portal-master/portal-impl/src/system.properties文件中,有如下配置: # # Set the default local ...

  5. 改变图片尺寸（python）

    for name in /图片路径; do convert -resize 256x256! $name $namedone

  6. 05_Java异常(Exception)

    1. 异常的概念 1.1什么是异常 异常指的是程序运行时出现的不正常情况. 1.2异常的层次 Java的异常类是处理运行时的特殊类,每一种异常对应一种特定的运行错误.所有Java异常类都是系统类库中E ...

  7. LIS(n^2) POJ 2533 Longest Ordered Subsequence

    题目传送门 题意:LIS(Longest Increasing Subsequence)裸题 分析:状态转移方程:dp[i] = max (dp[j]) + 1   (a[j] < a[i],1 ...

  8. bzoj1005 [HNOI2008]明明的烦恼

    1005: [HNOI2008]明明的烦恼 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3032  Solved: 1209 Description ...

  9. Codeforces Round #210 (Div. 2) A. Levko and Table

    让对角线的元素为k就行 #include <iostream> using namespace std; int main() { int n,k; cin >> n > ...

  10. ACM: HDU 1874 畅通工程续-Dijkstra算法

    HDU 1874 畅通工程续 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Desc ...