JS+AJAX实现省市区的下拉列表联动

<div class="info"><div class="title">企业地址:</div><div class="value"><fieldset disabled><select id="provinceSelect" class="form-control" data-val="${factoryCenterInfo.province}" οnchange="provinceChange()"><c:forEach items="${factoryPlace.provinceList}" var="province" varStatus="status"><option value="${province.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.province == province.key}">selected</c:if></span><span style="color:#3366ff;">></span>${province.value}</option></c:forEach></select></fieldset><fieldset disabled><select id="citySelect" class="form-control" data-val="${factoryCenterInfo.city}" οnchange="cityChange()"><c:forEach items="${factoryPlace.cityList}" var="city" varStatus="status"><option value="${city.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.city == city.key}">selected</c:if></span>>${city.value}</option></c:forEach></select></fieldset><fieldset disabled><select id="areaSelect" class="form-control" data-val="${factoryCenterInfo.area}"><c:forEach items="${factoryPlace.areaList}" var="area" varStatus="status"><option value="${area.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.area == area.key}">selected</c:if></span>>${area.value}</option></c:forEach></select></fieldset></div></div>

function provinceChange(){  var provinceId = $("#provinceSelect").val(); $("#citySelect").empty(); $("#areaSelect").empty();  if(provinceId != null && provinceId != ""){    $.ajax({   type: "POST",   url:"<span style="color:#3333ff;">factory/getChangeList</span>",   dataType:'json',   data: {    "parentId":provinceId,    "placeKbn":"C"   },   cache:false,   success: function(data){    if("success" == data.result){     if(data.cityList != null && data.cityList.length > 0){      for(var i = 0;i < data.cityList.length;i++){       var city = data.cityList[i];       var key = (city.key == null? "":city.key);       var value = (city.value == null? "":city.value);       $("#citySelect").append("<option value = /"" + key + "/">"+ value +"</option>");      }     }else{      $("#citySelect").append("<option> </option>");     }     $("#areaSelect").append("<option> </option>");    }    if("error" == data.result){     $("#citySelect").append("<option> </option>");     $("#areaSelect").append("<option> </option>");    }   },   error:function(XMLHttpRequest, textStatus, errorThrown){       $("#errorContent").html("系统异常请联系管理员");      }     }); }else{  $("#citySelect").append("<option> </option>");  $("#areaSelect").append("<option> </option>"); }} function cityChange(){  var cityId = $("#citySelect").val();  $("#areaSelect").empty();  if(cityId != null && cityId != ""){    $.ajax({   type: "POST",   url:"<span style="color:#3333ff;">factory/getChangeList</span>",   dataType:'json',   data: {    "parentId":cityId,    "placeKbn":"Q"   },   cache:false,   success: function(data){    if("success" == data.result){     if(data.areaList != null && data.areaList.length > 0){      for(var i = 0;i < data.areaList.length;i++){       var area = data.areaList[i];       var key = (area.key == null? "":area.key);       var value = (area.value == null? "":area.value);       $("#areaSelect").append("<option value = /"" + key + "/">"+ value +"</option>");      }     }else{      $("#areaSelect").append("<option> </option>");     }    }    if("error" == data.result){     $("#areaSelect").append("<option> </option>");    }   },   error:function(XMLHttpRequest, textStatus, errorThrown){       $("#errorContent").html("系统异常请联系管理员");      }     }); }else{  $("#citySelect").append("<option> </option>");  $("#areaSelect").append("<option> </option>"); }}

@RequestMapping("<span style="color:#3333ff;">getChangeList</span>") @ResponseBody public Object getChangeList(String parentId,String placeKbn){  logBefore(logger, "factory/getChangeList");  Map<String,Object> returnMap = new HashMap<String,Object>();    if(FactoryConsts.CHAR_KBN_CITY.equals(placeKbn)){   if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){    returnMap.put("result", "success");    returnMap.put("cityList", getPlacelist(parentId, placeKbn));   }else{    returnMap.put("error", "市列表为空");    returnMap.put("cityList", "");   }     }else if(FactoryConsts.CHAR_KBN_AREA.equals(placeKbn)){   if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){    returnMap.put("result", "success");    returnMap.put("areaList", getPlacelist(parentId, placeKbn));   }else{    returnMap.put("error", "区列表为空");    returnMap.put("areaList", "");   }  }  return returnMap; } /**  * 省下拉列表  *   * @return  */ private List<PlaceOption> getPlacelist(String parentId,String kbn){  //下拉列表  List<PlaceOption> placeList = new ArrayList<PlaceOption>();  placeList.add(new PlaceOption());  QueryPlaceInfoParam queryParam = new QueryPlaceInfoParam();  queryParam.setPlaceKbn(kbn);  if(!StringUtils.isEmpty(parentId)){   queryParam.setPlaceId(Integer.valueOf(parentId));  }  FactoryPlaceNameResult placeResult  = placeInfoService.queryPlaceInfo(queryParam);    if(placeResult != null && "0".equals(placeResult.getResult())     && placeResult.getPlaceInfo() != null     && placeResult.getPlaceInfo().size() > FactoryConsts.INT_0){   List<PlaceInfoFa> placeInfo = new ArrayList<PlaceInfoFa>();   placeInfo = placeResult.getPlaceInfo();   for(FactoryPlaceInfo info : placeInfo){    PlaceOption option = new PlaceOption();    option.setKey(String.valueOf(info.getPlaceId()));    option.setValue(info.getPlaceName());    placeList.add(option);   }  }    return placeList; }

/**  * 基本信息初期化方法  *   * @param request  * @return  */ @RequestMapping("toFactoryBaseInfo") public ModelAndView toFactoryBaseInfo(HttpServletRequest request){  logBefore(logger, "factory/toFactoryBaseInfo");  ModelAndView mv = new ModelAndView();  //企业类型  Map<String,String> factoryTypeMap = new TreeMap<String,String>();  factoryTypeMap.putAll(FactoryConsts.FACTORY_TYPE_MAP);  mv.addObject("factoryTypeMap", factoryTypeMap);    FactoryFactoryInfo factoryInfo = (FactoryFactoryInfo) request.getSession().getAttribute(Const.SESSION_FACTORY);   //取得企业信息  FactoryFactoryInfoParam infoParam = new FactoryFactoryInfoParam();             FactoryFactoryInfoResult infoResult = new FactoryFactoryInfoResult();  infoParam.setFactoryId(String.valueOf(factoryInfo.getFactoryId()));  infoParam.setDifferent(FactoryConsts.STRING_WEB_ONE); //web  infoResult = factoryService.factoryInfo(infoParam);   FactoryPlace factoryPlace = new FactoryPlace();    <span style="color:#3333ff;">// 省下拉列表  factoryPlace.setProvinceList(getPlacelist("0",FactoryConsts.CHAR_KBN_PROVINCE));  // 市下拉列表  factoryPlace.setCityList(getPlacelist(infoResult.getFactoryInfoEx().getProvince(),FactoryConsts.CHAR_KBN_CITY));  // 区下拉列表  factoryPlace.setAreaList(getPlacelist(infoResult.getFactoryInfoEx().getCity(),FactoryConsts.CHAR_KBN_AREA));</span>    <span style="color:#cc66cc;">mv.addObject("factoryPlace", factoryPlace);//地址的列表</span>  <span style="color:#6633ff;">mv.addObject("factoryCenterInfo", infoResult.getFactoryInfoEx());//企业表的基本信息</span>  mv.setViewName("factory/factoryInformationCenter/saveFactoryBaseInfo");  return mv; }