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);
}
}