//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. Asp.Net MVC中Controller与View之间传递的Model

    Controller --> View 的Model 与 提交表单后 View --> Controller 的Model 不是相同的对象,即:这两个Model为不同的指针,指向不同的地址 ...

  2. C语言中运算符的口决

  3. 【转】【异常处理】Incorrect string value: '\xF0\x90\x8D\x83...' for column... Emoji表情字符过滤的Java实现

    http://blog.csdn.net/shootyou/article/details/44852639 Emoji表情字符现在在APP已经广泛支持了.但是MySQL的UTF8编码对Emoji字符 ...

  4. hdu4968

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4968 说是考dp,但是我没出来dp在哪,可能贪心思想更多一些吧. AC代码: #inclu ...

  5. Eclipse Che：下一代基于 Web 的 IDE

    即使对于熟练的开发人员,想要去为一个项目贡献代码,正确的安装和配置一个集成开发环境.工作区 workspace和构建工具,都是一个十分艰难和浪费时间的任务.Codenvy 的CEO,Tyler Jew ...

  6. 转载：Java面试笔试题大汇总

    本文来源于:http://blog.csdn.net/wulianghuan 1.面向对象的特征有哪些方面 1).抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关 ...

  7. 转载:robotium typeText与enterText区别

    solo.typeText和solo.enterText方法都可以对EditeText进行测试,达到的测试目的是一样的.存在几点不同: 1.实现上,typeText方法是robotium框架调用系统I ...

  8. LightOJ1230 Placing Lampposts（DP）

    题目大概说给一个森林求其最小点覆盖数,同时在最小点覆盖条件下输出最多有多少条边被覆盖两次. dp[0/1][u]表示以u为根的子树内的边都被覆盖且u不属于/属于覆盖集所需的最少点数 另外,用cnt[0 ...

  9. ccc this 指针

    cc.Class({ extends: cc.Component, properties: { musicPlayer: { default: null, type: cc.AudioSource } ...

  10. ssh An internal error occured during "Add Deployment"

    这个问题一般是由于导入别人做的项目,但是项目所用的jdk跟当前所用的jdk不一样. 以前遇到过这个问题没有解决,今天解决了. 右键项目名→Properties→Java Build Path→Libr ...