`
周一Monday
  • 浏览: 346834 次
  • 来自: 北京
社区版块
存档分类
最新评论

三级联动

阅读更多
/**
 * 省份
 */
public class Province {
 private int pid;
 private String pname;
 public Province() {
 }
 public Province(int pid, String pname) {
  this.pid = pid;
  this.pname = pname;
 }
 // getter and setter
}

 

/**
 * 城市
 */
public class City {
 private int cid;
 private String cname;
 public City() {
 }
 public City(int cid, String cname) {
  this.cid = cid;
  this.cname = cname;
 }
 // getter and setter
}

  

/**
 * 区县
 */
public class District {
 private int did;
 private String dname;
 public District() {
 }
 public District(int did, String dname) {
  this.did = did;
  this.dname = dname;
 }
 //getter and setter
}

 

public class LinkService {
 /**
  * 取得全部省份
  */
 public List<Province> getAllProvinces() {
  List<Province> provinces = new ArrayList<>();
  provinces.add(new Province(1, "吉林"));
  provinces.add(new Province(2, "辽宁"));
  return provinces;
 }
 /**
  * 根据省份Id取得城市
  * @param provinceId
  * @return
  */
 public List<City> getCityByProvinceId(int provinceId) {
  List<City> cities = new ArrayList<>();
  if (1 == provinceId) {
   cities.add(new City(1, "长春"));
   cities.add(new City(2, "四平"));
  } else if (2 == provinceId) {
   cities.add(new City(3, "大连"));
   cities.add(new City(4, "鞍山"));
  }
  return cities;
 }
 
 /**
  * 根据城市Id取得区域
  * @param citId
  * @return
  */
 public List<District> getDistrictByCityId(int cityId) {
  List<District> districts = new ArrayList<>();
  if (1 == cityId) {
   districts.add(new District(1, "九台"));
   districts.add(new District(2, "农安"));
  } else if (2 == cityId) {
   districts.add(new District(3, "梨树"));
   districts.add(new District(4, "公主岭"));
  }else if (3 == cityId) {
   districts.add(new District(3, "沙河口"));
   districts.add(new District(4, "甘井子"));
  }else if (4 == cityId) {
   districts.add(new District(3, "铁东"));
   districts.add(new District(4, "立山"));
  }
  return districts;
 }
}

 

@WebServlet("/linkServlet")
public class LinkServlet extends HttpServlet {
 private static final long serialVersionUID = -5853753788149746000L;
 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String method = request.getParameter("method");
  if (null == method || "".equals(method)) {
   listProvince(request, response);
  } else if ("listCity".equals(method)) {
   listCity(request, response);
  } else if ("listDistrict".equals(method)) {
   listDistrict(request, response);
  }
 }
 /** 返回省份 */
 private void listProvince(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  LinkService linkService = new LinkService();
  request.setAttribute("provinces", linkService.getAllProvinces());
  request.getRequestDispatcher("/WEB-INF/jsp/listProvince.jsp").forward(request, response);
 }
 /** 返回城市 */
 private void listCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String provinceIdStr = request.getParameter("provinceId");
  if (null != provinceIdStr && !"".equals(provinceIdStr)) {
   int provinceId = Integer.parseInt(provinceIdStr);
   LinkService linkService = new LinkService();
   List<City> cities = linkService.getCityByProvinceId(provinceId);
   String result = new Gson().toJson(cities);   //这是使用了GSON,来返回JSON对象
   response.setContentType("text/html;charset=utf-8");
   response.getWriter().print(result);
  }
 }
 /** 返回区县 */
 private void listDistrict(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String cityIdStr = request.getParameter("cityId");
  if (null != cityIdStr && !"".equals(cityIdStr)) {
   int cityId = Integer.parseInt(cityIdStr);
   LinkService linkService = new LinkService();
   List<District> districts = linkService.getDistrictByCityId(cityId);
   String result = new Gson().toJson(districts); //这是使用了GSON,来返回JSON对象
   response.setContentType("text/html;charset=utf-8");
   response.getWriter().print(result);
  }
 }
}

 

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
 $(function(){
  //加载城市
  $("#province").change(function(){
   var url = "linkServlet?method=listCity&now="+new Date();
   var param = {"provinceId":$.trim($(this).val())};
   $.post(url,param,function(data,status){
    if(status=="success"){
     $("#city option[value!='']").remove(); //先清空
     var obj= $.parseJSON(data); // 注意,不然这写,会报错TypeError: invalid 'in' operand obj。
     $.each(obj,function(index,item){
      var option = $("<option/>");
      option.attr("value",item.cid);
      option.text(item.cname);
      $("#city").append(option);
     });
    }else{
     alert("数据加载失败");
    }
   });
  });
  
  //加载区县
  $("#city").change(function(){
   var url = "linkServlet?method=listDistrict&now="+new Date();
   var param = {"cityId":$.trim($(this).val())};
   $.post(url,param,function(data,status){
    if(status=="success"){
     $("#district option[value!='']").remove(); //先清空
     var obj = $.parseJSON(data);
     $.each(obj,function(index,item){
      var option = $("<option/>");
      option.attr("value",item.did);
      option.text(item.dname);
      $("#district").append(option);
     });
    }else{
     alert("数据加载失败");
    }
   });
  });
  
 });
</script>
</head>
<body>


<!-- 省份 -->
<select name="province" id="province">
 <option value="">请选择</option>
 <c:forEach var="p" items="${provinces}">
  <option value="${p.pid}">${p.pname}</option>
 </c:forEach>	
</select>

<!-- 城市 -->
<select name="city" id="city">
 <option value="">请选择</option>
</select>

<!-- 区县 -->
<select name="district" id="district">
 <option value="">请选择</option>
</select>

</body>

 

 

分享到:
评论
6 楼 java怪胎 2013-12-01  
var jsonObj = eval("(" + data + ")");
提示语法错误~
[21:01:49.741] SyntaxError: syntax error
LZ知道为什么吗~~
5 楼 周一Monday 2012-05-11  
各位朋友,这个东西我是一年前学JS写的,已经不知道哪去了。
而且,现在在单位就写后台,JS很久没碰了。。。
4 楼 sy_shu 2012-05-10  
兄弟,求源码 1028521403@qq.com
3 楼 smallbird111 2012-05-05  
兄弟,给源代码来看看了!!!!!!!!!1453917139@qq.com
2 楼 yexichen 2012-01-03  
您好,不知可否分享源代码?这个包我老是弄不好。。。

QQ:276099176
1 楼 zhangpurple 2011-11-10  
  可以 不过js有个小bug

相关推荐

    三级联动源码

    在当今的互联网应用中,"三级联动"这种交互设计模式愈发常见。这种设计模式使得在网页或应用程序中实现复杂的动态数据关联和选择变得简单便捷。三级联动不仅仅是用户体验的提升,更是前端技术实力的体现。它能在省-...

    【2020年05月更新,官网实时更新】省市区三级联动/中国省市区地址三级联动/全国省市区三级联动数据下载

    提供目前中国全部行政区域的省(市/自治区)、市(区/自治州)、区(县/市)三级联动最新数据,可以用于各类应用开发。2019年10月31日,我公司(www.ebaitian.cn)决定将中国最新的行政区划数据向社会公众共享,以...

    一个最简单的三级联动代码

    在IT行业中,三级联动是一种常见的交互设计模式,尤其在数据筛选和导航系统中十分常见。这个"一个最简单的三级联动代码"示例可能是用来帮助开发者理解如何实现这种功能的。下面我们将深入探讨三级联动的基本概念、...

    RecyclerView三级联动

    在Android开发中,"RecyclerView三级联动"是一种常见的交互设计,尤其在展示层级关系的数据时,如商品分类、地区选择等场景。RecyclerView作为Android系统提供的一个高效、可复用的列表视图,能够处理大量数据并提供...

    三级联动效果

    在网页设计和开发中,"三级联动效果"是一种常见的交互设计模式,特别是在处理地理区域选择、类别筛选等场景。这种效果通常涉及到三个下拉选择框,它们之间存在依赖关系:第一个下拉框的选择会影响第二个下拉框的内容...

    ASP三级联动下拉菜单

    ASP三级联动下拉菜单 ASP三级联动下拉菜单是指在ASP编程中实现三级联动的下拉菜单,通过调用数据库数据来实现三级分类的联动效果。这种技术广泛应用于各种Web应用程序中,例如电商平台、在线论坛等。 在这个例子中...

    微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)

    微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有自定义地区码(源代码+截图)微信小程序-省市县三级联动,带有...

    jsp+ajax 三级联动菜单

    【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景,它主要利用JavaServer Pages(JSP)和Asynchronous JavaScript and XML(AJAX)来实现动态网页中的数据交互和页面更新。在这个例子中,我们看到的是一个...

    asp二级联动下拉框,三级联动下拉框

    在ASP中,二级联动和三级联动下拉框是常见的功能,通常用于实现数据的筛选和过滤,例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...

    移动端、h5省市区三级联动

    在移动端和H5开发中,省市区三级联动是一种常见的功能需求,主要用于地址选择,提供用户一个方便快捷的方式来选择他们的详细地址。本示例提供了一款适用于这两种平台的三级联动组件,下面将详细介绍这个功能及其实现...

    js+jsp三级联动 源码

    在IT行业中,"js+jsp三级联动 源码"是一个常见的前端与后端交互的实践案例,主要用于实现用户界面的动态筛选和过滤。这里,我们主要探讨的是使用JavaScript(js)和JavaServer Pages(jsp)来创建一个具有三级联动...

    JS插件 ---- pc端三级联动的demo

    在网页开发中,"三级联动"是一种常见的交互设计,尤其在构建导航菜单、地区选择、商品分类等场景中广泛使用。这种设计涉及到JavaScript(JS)技术,通过JS插件实现,使得用户在选择某一选项时,其他关联的下拉菜单会...

    Android省市区三级联动滚轮选择——Cascade_Master

    "Android省市区三级联动滚轮选择——Cascade_Master"是一个专门为解决这一问题而设计的组件。这个组件是从实际项目中提炼出来的,旨在提供一个高效、直观且易于集成的解决方案。 该组件是基于开源库`Android-wheel`...

    Ajax JavaWeb JS 三级联动

    在Web开发中,"Ajax JavaWeb JS 三级联动"是一个常见的功能需求,它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单,通常用于地区选择、商品分类等场景,用户...

    android 高仿京东,美团网三级联动

    在Android开发中,实现类似京东、美团这样的三级联动菜单是一项挑战性的任务,它涉及到复杂的UI交互和数据层次结构的管理。这个项目通过双ListView成功地实现了这一功能,并且具有90%的相似度,这对于开发者来说是一...

    测试三级联动

    在IT领域,"三级联动"通常指的是在前端交互设计中,一种常见的下拉选择框的联动效果。这种效果常用于地址选择,用户首先选择省份,接着根据省份的选择更新市的选项,最后根据市的选择更新区的选项,全程无需刷新页面...

    简单的asp三级联动

    在本案例中,"简单的asp三级联动"是指利用ASP技术实现的三级菜单联动效果,通常用于网站的分类导航,例如产品分类、地区选择等。这种联动意味着当用户在一个级别上选择一个选项时,下一级别的选项会根据所选内容动态...

    三级联动demo

    在IT行业中,"三级联动"通常指的是在一个交互界面中,三个相关的下拉菜单或选择框之间存在联动关系,即一个选项的选择会影响到下一个选项的显示内容。这种设计常见于地址选择,例如选择省份后,市的选择会更新为对应...

    WPF三级联动-源代码

    **WPF三级联动**是一种常见的用户界面设计技术,主要用于实现数据的多级关联与筛选,常见于例如省市区选择、商品分类筛选等场景。在Windows Presentation Foundation (WPF) 中,这种联动效果可以通过数据绑定、控件...

    三级联动全国最全

    在IT行业中,"三级联动"通常指的是在用户界面设计中的一种交互模式,特别是在表单填写或数据筛选时,常见的如省市区选择。这种联动机制允许用户先选择一级区域(如省份),接着二级区域(如城市)会根据一级的选择...

Global site tag (gtag.js) - Google Analytics