天天看點

位址五級關聯

html代碼

<div class="panel_content" id="search_list">
            	<table class="form_table" cellpadding="0" cellspacing="0">
                	<tbody>
	                	<tr class="">
	                        <td class="form_label">請選擇地區</td>
	                        <td colspan="4" style="width: 400px;">
	                        	<input type="text" class="input_text" readonly="" style="background: none;width: 130px; height: 30px; margin-top: 1px;margin: auto;" value="甘肅省">
	                        	<select id="city" οnchange="selectCity('city','county','3','縣(區)');" style="width: 130px; margin-right: 3px;margin: auto;"><option value="">市</option></select>
	                        	<select id="county" οnchange="selectCity('county','town','4','鄉(鎮)');" style="width: 130px; margin-right: 3px;margin: auto;" ><option value="">縣(區)</option></select>
	                        	<select id="town" οnchange="selectCity('town','village','5','村');" style="width: 130px; margin-right: 4px;margin: auto;"><option value="">鄉(鎮)</option></select>
	                        	<select id="village" style="width: 130px; margin-right: 4px;margin: auto;"><option value="">村</option></select>
	                        </td>
	                        <td>
					<input type="button" class="btn blue" name="" value="查找" οnclick="loadListPage();">
				</td>
							
	                    </tr>
                	</tbody>
               </table>
            </div>
           

js代碼

var projectName = 'kqym';
var town = 'town';
var village = 'village';
var city = 'city';
var county = 'county';
var areaCode = '62';
/**
 * 行政區劃五級關聯初始化
 * @param name :項目名稱
 * @param cityID 市的ID,select的id
 * @param countyID 縣的ID,select的id
 * @param townID :鄉鎮ID,select的id
 * @param villageID 村的ID,select的id
 * @param areaCode 行政區劃
 */
function initAreaCode5(name,townID,villageID,cityID,countyID,areaCode) {
	if(name != '' && name != null){
		projectName = name;
	}
	if(townID != '' && townID != null){
		town = townID;
	}
	if(villageID != '' && villageID != null){
		village = villageID;
	}
	if(cityID != '' && cityID != null){
		city = cityID;
	}
	if(countyID != '' && countyID != null){
		county = countyID;
	}
	if(areaCode != '' && areaCode != null){
		areaCode = areaCode.replace(/0*$/,"");
	}
	if(areaCode.length == 2){
		//初始化查詢條件資料
		getData(areaCode,'2',city,'市');
		//查詢後的資料回顯
		selectCity(city,county,'3','縣(區)',null);
		selectCity(county,town,'4','鄉(鎮)',null);
		selectCity(town,village,'5','村',null);
	}else if(areaCode.length == 4){
		//初始化查詢條件資料
		getData(areaCode.substring(0, 2),'2',city,'市',areaCode);
		//查詢後的資料回顯
		selectCity(city,county,'3','縣(區)',null);
		selectCity(county,town,'4','鄉(鎮)',null);
		selectCity(town,village,'5','村',null);
	}else if(areaCode.length == 6){
		//初始化查詢條件資料
		getData(areaCode.substring(0, 2),'2',city,'市',areaCode.substring(0, 4));
		//查詢後的資料回顯
		selectCity(city,county,'3','縣(區)',areaCode);
		selectCity(county,town,'4','鄉(鎮)',null);
		selectCity(town,village,'5','村',null);
	}else if(areaCode.length == 9){
		//初始化查詢條件資料
		getData(areaCode.substring(0, 2),'2',city,'市',areaCode.substring(0, 4));
		//查詢後的資料回顯
		selectCity(city,county,'3','縣(區)',areaCode.substring(0, 6));
		selectCity(county,town,'4','鄉(鎮)',areaCode);
		selectCity(town,village,'5','村',null);
	}else{
		//初始化查詢條件資料
		getData(areaCode.substring(0, 2),'2',city,'市',areaCode.substring(0, 4));
		//查詢後的資料回顯
		selectCity(city,county,'3','縣(區)',areaCode.substring(0, 6));
		selectCity(county,town,'4','鄉(鎮)',areaCode.substring(0, 9));
		selectCity(town,village,'5','村',areaCode);
	}
}
/**
 * 級聯初始化
 * @param id select的id屬性
 * @param areaName 下一級的id屬性
 * @param level  區劃級别
 * @param cityName 不選中時預設顯示的值
 * @param selectArea 用于回顯的行政區劃
 */
function selectCity(id,areaName,level,cityName,selectArea){
	var options=$('#'+id+' option:selected'); //擷取選中的項
	getData(options.val(),level,areaName,cityName,selectArea);
	if(level == 3){
		$('#'+town).html('<option value="">鄉(鎮)</option>');
		$('#'+village).html('<option value="">村</option>');
	}else if(level == 4){
		$('#'+village).html('<option value="">村</option>');
	}
}
//擷取分級資料
function getData(parentId,level,id,name,selectArea){
	//ajax加載市級資料
	$.ajax({
		type : "POST",
		async: false,
		dataType : "json",
		url : projectName+"/ymdx/village/getChildAreaCodeAjax?parentId="+parentId+"&level="+level,
		success : function(data) {
			var html = '<option value="">'+name+'</option>';
			if(data.length > 0){
				for(var i= 0; i < data.length;i++){
					if(selectArea != '' && selectArea != null){
						if ((data[i].RES_ID+"").indexOf(selectArea) != -1) {
							html+='<option selected value="'+data[i].RES_ID+'">'+data[i].RES_NAME+'</option>';
						}else{
							html+='<option value="'+data[i].RES_ID+'">'+data[i].RES_NAME+'</option>';
						}
					}else{
						if (data[i].RES_ID == $('#areaCity').val() || data[i].RES_ID == $('#areaTown').val() || data[i].RES_ID == $('#areaCounty').val() || data[i].RES_ID == $('#areaVillage').val()) {
							html+='<option selected value="'+data[i].RES_ID+'">'+data[i].RES_NAME+'</option>';
						}else{
							html+='<option value="'+data[i].RES_ID+'">'+data[i].RES_NAME+'</option>';
						}
					}
					
				}
				//添加市的資料
				$('#'+id).html(html);
				if(selectArea != '' && selectArea != null){
					$('#'+id).attr("disabled",true);
				}
			}
		}
	});
}
           

背景controller代碼

/**
	 * 
	 * @Title: getChildAreaCodeAjax  
	 * @Description: TODO(這裡用一句話描述這個方法的作用) 
	 * @author ***  
	 * @param @param request
	 * @param @return
	 * @param @throws Exception    參數  
	 * @return List<Map<String,Object>>    傳回類型
	 * @date 2018年5月24日 下午7:46:00  
	 * @throws
	 */
	@RequestMapping(value="/getChildAreaCodeAjax")
	@ResponseBody
	public List<Map<String, Object>> getChildAreaCodeAjax(ServletRequest request) throws Exception{
		String parentId = request.getParameter("parentId");
		String level = request.getParameter("level");
		return khCheckItemService.getChildByParent(parentId, level);
	}
	
           

Service代碼

public List<Map<String, Object>> getChildByParent(String parentId, String searchKey) throws Exception;
           

Service實作

@Override
	public List<Map<String, Object>> getChildByParent(String parentId, String searchKey) throws Exception {
		List<Map<String, Object>> list = null;
		try {
			if(StringHelper.isNotBlack(parentId)){
				StringBuffer childSb = new StringBuffer("SELECT d.RES_ID,d.RES_PART_ID,d.RES_NAME FROM SYS_DISTRICTS d WHERE d.RES_PART_ID like '"+parentId+"%' AND d.RES_LEVEL = '"+searchKey+"' ORDER BY d.RES_ID ASC");
				list = jdbcTemplate.queryForList(childSb.toString());
			}
			return list;
		} catch (Exception e) {
			e.printStackTrace();
			throw new Exception("根據父級行政區劃編碼" + parentId + "擷取子級行政區劃編碼集合出錯!", e);
		}
	}