//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. Android系统介绍与框架(转)

    一.Andriod是什么? Android系统是Google开发的一款开源移动OS,Android中文名被国内用户俗称“安卓”.Android操作系统基于Linux内核设计,使用了Google公司自己 ...

  2. sp_executesql的用法

    之前做项目的时候负责一个成绩分析的模块儿,写存储过程的时候因为考试的科目是不固定的,所以导致查找成绩的sql语句也是动态的,就用到了sp_executesql,下面就来说一说它的用法 需求:表名是动态 ...

  3. JS 正则表达式详解

    在此提供相关的链接,请访问: http://www.cnblogs.com/dolphinX/p/3486214.html http://www.cnblogs.com/dolphinX/p/3486 ...

  4. Codeforces Round #369 (Div. 2) D. Directed Roads dfs求某个联通块的在环上的点的数量

    D. Directed Roads   ZS the Coder and Chris the Baboon has explored Udayland for quite some time. The ...

  5. 通过PID获取进程路径的几种方法

    通过PID获取进程路径的几种方法 想获得进程可执行文件的路径最常用的方法是通过GetModuleFileNameEx函数获得可执行文件的模块路径这个函数从Windows NT 4.0开始到现在的Vis ...

  6. Java中继承thread类与实现Runnable接口的区别

    Java中线程的创建有两种方式: 1．  通过继承Thread类,重写Thread的run()方法,将线程运行的逻辑放在其中 2．  通过实现Runnable接口,实例化Thread类 在实际应用中, ...

  7. loadrunner中切割字符串

    下面函数的作用: http://blog.csdn.net/hgj125073/article/details/8447605 通过-与: 字符切割字符串,即-与:字符已经被\0 字符取代 char  ...

  8. RecyclerView再封装

    RecyclerView做为ListView的替代品,已经出了很久了,既然是替代品,那自然有些ListView没有的优点.比如说:可以随意切换list,grid,stagger.可以指定一个或多个it ...

  9. MFC HTTP访问URL

    unsigned short nPort; //用于保存目标HTTP服务端口 CString strServer, strObject; //strServer用于保存服务器地址,strObject用 ...

  10. java-类

    浏览以下内容前,请点击并阅读 声明 java是面向对象的语言,而对象的创建,则需要借助类,类可以说是一个创建对象的模具(个人理解). 类的定义 以下构成定义类的最简单(不能再简单)语句: class ...