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