//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. util.js

    轻量基础库.方法库 用时可直接拷贝 拆卸式使用 适用于mobile端简单页面 适用于PC简单页面 基于node.php等多种构建方法 (function(M){ /** * 初始化Ajax请求 * @ ...

  2. 面向对象中this问题

    this什么时候会出错? 注意:其中var _this = this 的巧妙用法. 1.定时器: <script type="text/javascript"> //如 ...

  3. 【js 方法】js 页面刷新location.reload和location.replace的区别 【转】

    [转]:http://zccst.iteye.com/blog/2162658 reload 方法,该方法强迫浏览器刷新当前页面. 语法: location.reload([bForceGet]) 参 ...

  4. 关于解决haswell赛扬和奔腾 不能安装的问题

    打开EFI\CLOVER\config.plist,并找到KernelAndKextPatches字段,在子集内插入下面代码. <key>FakeCPUID</key> < ...

  5. 【转】使用Apache Kylin搭建企业级开源大数据分析平台

    http://www.thebigdata.cn/JieJueFangAn/30143.html 本篇文章整理自史少锋4月23日在『1024大数据技术峰会』上的分享实录:使用Apache Kylin搭 ...

  6. poj2184 01背包变形，价值为可为负数

    题目链接:http://poj.org/problem?id=2184 题意:每行给出si和fi,代表牛的两个属性,然后要求选出几头牛,满足S与F都不能为负数的条件下,使S与F的和最大. tips:动 ...

  7. Codeforces Round #354 (Div. 2)-C

    C. Vasya and String 题目链接:http://codeforces.com/contest/676/problem/C High school student Vasya got a ...

  8. 《DSP using MATLAB》示例Example4.11

    代码: b = [1, 0]; a = [1, -0.9]; % %% ---------------------------------------------- %% START a determ ...

  9. 【CLR Via C#】第5章 基元类型、引用类型、值类型

    第二遍看这本书,决定记录一下加深印象. 1,基元类型 什么事基元类型?基元类型是直接映射到FrameWork类库(FCL)中存在的类型,编译器直接支持的数据类型.比如int直接映射到System.In ...

  10. http://www.cnblogs.com/younggun/archive/2013/07/16/3193800.html

    http://www.cnblogs.com/younggun/archive/2013/07/16/3193800.html