//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. 如果我可以重新学习iOS开发（转）

    在过去的几个月里,我一直在学习用Objective-C编写iOS app,最后我开始理清思绪.这比我想象中要难很多,也花了太长时间. 我经常遇到困难.感到沮丧,修复bug比实际写代码要花太多时间.但是 ...

  2. How Kafka’s Storage Internals Work

    In this post I'm going to help you understand how Kafka stores its data. I've found understanding th ...

  3. sqoop与mysql之间中文乱码

    sudo -u hive sqoop export --connect "jdbc:mysql://192.168.22.201/LauncherDB?useUnicode=true& ...

  4. LoadRunner脚本

    Action() { char *str1=(char *)malloc(1024*sizeof(char)); char *str2="0"; char *str3=(char ...

  5. 解决ScrollView嵌到listView冲突问题

    方法一: 把下面的方法放在绑定适配器操作的下面就行. /** * 重新计算ListView的高度,解决ScrollView和ListView两个View都有滚动的效果,在嵌套使用时起冲突的问题 * @ ...

  6. 运用Python成为黑客

    1.Fuzz测试: 漏洞挖掘有三种方法:白盒代码审计.灰盒逆向工程.黑盒测试.其中黑盒的Fuzz测试是效率最高的一种,能够快速验证大量潜在的安全威胁. Fuzz测试,也叫做"模糊测试&quo ...

  7. zookeeper + LevelDB + ActiveMQ实现消息队列高可用

    通过集群实现消息队列高可用. 消息队列在项目中存储订单.邮件通知.数据分发等重要信息,故对消息队列稳定可用性有高要求. 现在通过zookeeper选取activemq leader的形式实现当某个ac ...

  8. BZOJ 2716 [Violet 3]天使玩偶 ——KD-Tree

    [题目分析] KD-Tree的例题.同BZOJ2648. [代码] #include <cstdio> #include <cstring> #include <cstd ...

  9. 泛型容器单元(Generics.Collections)[2]: TQueue<T> 队列列表

    TQueue 和 TStack, 一个是队列列表, 一个是堆栈列表; 一个是先进先出, 一个是先进后出. TQueue 主要有三个方法.一个属性:Enqueue(入列).Dequeue(出列).Pee ...

  10. 在windows环境中用eclipse搭建hadoop开发环境

    1. 整体环境和设置 1.1 hadoo1.0.4集群部署在4台VMWare虚拟机中,这四台虚拟机都是通过NAT模式连接主机 集群中/etc/hosts文件配置 #本机127.0.0.1 localh ...