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

本文实例为大家分享了JS+AJAX实现省市区下拉列表联动的具体代码，供大家参考，具体内容如下
效果图如下，DB中存取的数据来抽取.

文章图片

前台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 = https://www.it610.com/article/(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 = https://www.it610.com/article/(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); //webinfoResult = 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; }

多级联动效果就能实现了。
【JS+AJAX实现省市区的下拉列表联动】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。