三级联动

/**
 * 省份
 */
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  

兄弟，求源码 [e-mail]

3 楼 smallbird111 2012-05-05  

兄弟，给源代码来看看了！！！！！！！！！[e-mail]

2 楼 yexichen 2012-01-03  

您好，不知可否分享源代码？这个包我老是弄不好。。。

QQ：276099176

1 楼 zhangpurple 2011-11-10  

  可以 不过js有个小bug