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

本文实例为大家分享了JS+AJAX实现省市区下拉列表联动的具体代码,供大家参考,具体内容如下

效果图如下,DB中存取的数据来抽取.

JS+AJAX实现省市区的下拉列表联动_第1张图片

前台JSP页面的实现

企业地址:

JS实现代码

效果:实现多次ajax请求,联动搜索数据

function provinceChange(){
 
 var provinceId = $("#provinceSelect").val();
 $("#citySelect").empty();
 $("#areaSelect").empty();
 
 if(provinceId != null && provinceId != ""){
  
  $.ajax({
   type: "POST",
   url:"factory/getChangeList",
   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("");
      }
     }else{
      $("#citySelect").append("");
     }
     $("#areaSelect").append("");
    }
    if("error" == data.result){
     $("#citySelect").append("");
     $("#areaSelect").append("");
    }
   },
   error:function(XMLHttpRequest, textStatus, errorThrown){
       $("#errorContent").html("系统异常请联系管理员");
      }
   
  });
 }else{
  $("#citySelect").append("");
  $("#areaSelect").append("");
 }
}
 
function cityChange(){
 
 var cityId = $("#citySelect").val();
 
 $("#areaSelect").empty();
 
 if(cityId != null && cityId != ""){
  
  $.ajax({
   type: "POST",
   url:"factory/getChangeList",
   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("");
      }
     }else{
      $("#areaSelect").append("");
     }
    }
    if("error" == data.result){
     $("#areaSelect").append("");
    }
   },
   error:function(XMLHttpRequest, textStatus, errorThrown){
       $("#errorContent").html("系统异常请联系管理员");
      }
   
  });
 }else{
  $("#citySelect").append("");
  $("#areaSelect").append("");
 }
}

后台controller实现代码

@RequestMapping("getChangeList")
 @ResponseBody
 public Object getChangeList(String parentId,String placeKbn){
  logBefore(logger, "factory/getChangeList");
  Map returnMap = new HashMap();
  
  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 getPlacelist(String parentId,String kbn){
  //下拉列表
  List placeList = new ArrayList();
  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 placeInfo = new ArrayList();
   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;
 }

同时点画面menu的时候,画面初期话的时候controller实现

/**
  * 基本信息初期化方法
  * 
  * @param request
  * @return
  */
 @RequestMapping("toFactoryBaseInfo")
 public ModelAndView toFactoryBaseInfo(HttpServletRequest request){
  logBefore(logger, "factory/toFactoryBaseInfo");
  ModelAndView mv = new ModelAndView();
  //企业类型
  Map factoryTypeMap = new TreeMap();
  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();
  
  // 省下拉列表
  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));
  
  mv.addObject("factoryPlace", factoryPlace);//地址的列表
  mv.addObject("factoryCenterInfo", infoResult.getFactoryInfoEx());//企业表的基本信息
  mv.setViewName("factory/factoryInformationCenter/saveFactoryBaseInfo");
  return mv;
 }

多级联动效果就能实现了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的