关于省市区的下拉列表联动实现(JS+AJAX)

效果图如下，DB中存取的数据来抽取~

    

前台JSP页面的实现

企业地址:




selected>${province.value}






selected>${city.value}






selected>${area.value}

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(""+ value +"");
						}
					}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(""+ value +"");
						}
					}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;
	}

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