使用区划代码的省市县三级联动下拉框

最新推荐文章于 2024-01-20 10:35:25 发布

iteye_9831

最新推荐文章于 2024-01-20 10:35:25 发布

阅读量245

点赞数

分类专栏： javascript 文章标签： json javascript ViewUI

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

从网上又找了一份截止2009年底的全国行政区划代码表，重写了省市县三级联动下拉框。如下：

test.html


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="Area.js"></script>
<style>
body{font-size:14px; font-family:simsun;margin:0;}
</style>
</head>
<body>
<span id="areaContainer">
	<select></select><select></select><select></select>
</span>
<input id="getValueBtn" type="button" value="getValue">
</body>
</html>
<script type="text/javascript">
$(function(){
	Area.init('area2.json');
	var area  = new Area('#areaContainer');
	area.select('450802');

	$('#getValueBtn').click(function(){
		var code = area.getAddress();
		var address = Area.getAddressByCode(code);
		alert(code + address);
	});
});
</script>

Area.js


function Area(selector){
	if(!Area.ALL_AREAS){
		throw new Error('areas not init！');
	}

	this.selector = selector;
	var $province = this._getElement(Area.type.PROVINCE);
	var $city = this._getElement(Area.type.CITY);
	var $county = this._getElement(Area.type.COUNTY);

	var self = this;
	$province.change(function(){
		var province = this.value;
		$city.html(self._getOptions(province));
		var city = $city.val();
		$county.html(self._getOptions(city));
	});
	$city.change(function(){
		var city = this.value;
		$county.html(self._getOptions(city));
	});
	$province.html(self._getOptions());
	this.select();
}

$.extend(Area, {
	ALL_AREAS : null,
	type : {
		PROVINCE : 0,
		CITY : 1,
		COUNTY : 2
	},
	init : function(url){
		if(Area.ALL_AREAS) return;
		Area.ALL_AREAS = $.parseJSON($.ajax({
			url : url,
			async : false
		}).responseText);
	},
	getAddressByCode : function(code){
		var codePath = Area._toCodePath(code);
		var address = [];
		var areas = Area.ALL_AREAS;
		for(var i=0; i<codePath.length; i++){
			var area = areas[codePath[i]];
			if(!area) break;
			address.push(Area._getAreaName(area));
			areas = area[Area._getAreaName(area)];
		}
		return address;
	},
	_toCodePath : function(code){
		if(code == null) return [];

		var provinceCode = parseInt(code / 10000) * 10000;
		var cityCode = parseInt(code / 100) * 100;

		if(provinceCode == code) return [ code ];
		if(cityCode == code) return [provinceCode, code];
		return [provinceCode, cityCode, code];
	},
	_getAreaName : function(area){
		if(typeof(area) == 'string') return area;
		for(var o in area){
			return o;
		}
	}
});

Area.prototype = {
	_getElement : function(type){
		return $(this.selector).find('select').eq(type);
	},

	select : function(code){
		var $province = this._getElement(Area.type.PROVINCE);
		var $city = this._getElement(Area.type.CITY);
		var $county = this._getElement(Area.type.COUNTY);

		var codePath = Area._toCodePath(code);
		var province = codePath.length < 1 ? '' : codePath[0]; 
		$province.val(province);
		$city.html(this._getOptions(province));

		var city = codePath.length < 2 ? '' : codePath[1]; 
		$city.val(city);
		$county.html(this._getOptions(city));

		var county = codePath.length < 3 ? '' : codePath[2]; 
		$county.val(county);
	},

	getAddress : function(){
		var $province = this._getElement(Area.type.PROVINCE);
		var $city = this._getElement(Area.type.CITY);
		var $county = this._getElement(Area.type.COUNTY);

		if($county.val()) return $county.val();
		if($city.val()) return $city.val();
		if($province.val()) return $province.val();
		return null;
	},

	_getAreas : function(code, superAreas){
		var area = superAreas[ code ];
		if(!area) return {};
		return area[Area._getAreaName(area)] || {};
	},

	_getAreasByCode : function(code){
		var areas = Area.ALL_AREAS;
		var codePath = Area._toCodePath(code);

		for(var i=0; i<codePath.length; i++){
			areas = this._getAreas(codePath[i], areas);
		}
		return areas;
	},

	_getOrderAreas : function(code){
		var areas = this._getAreasByCode(code);
		var codes = [];
		for(var i in areas){
			codes.push(i);
		}
		return {
			codes : codes.sort(),
			areas : areas
		};
	},

	_getOption : function(code, area){
		return '<option value="' + code + '">' + Area._getAreaName(area) + '</option>';
	},

	_getOptions : function(code){
		var orderAreas = this._getOrderAreas(code);
		var codes = orderAreas.codes;
		var areas = orderAreas.areas;
		var options = '<option value="">请选择</option>';

		for(var i=0; i<codes.length; i++){
			options += this._getOption(codes[i], areas[codes[i]]);
		}
		return options;
	}
};

area.json格式为了节省空间，分别将区划代码、区划名称作为map的key。
在创建select-options的时候再按照区划代码进行排序。


{
	"450000" : {
		"广西壮族自治区" : {
			"450800" : {
				"贵港市" : {
					"450802" : "港北区",
					"450801" : "市辖区"
				}
			},
			"450500" : {
				"北海市" : {
					"450501" : "市辖区"
				}
			}
		}
	},
	"140000" : {
		"山西省" : {
		}
	}	
}

格式转换工具：


public class Test2 {
public static void main(String[] args) throws Exception {
	Workbook workbook = Workbook.getWorkbook(Test2.class.getResourceAsStream("行政区划代码(截至2009年12月31日).xls"));
	Sheet sheet = workbook.getSheet(0);

	/** key=code, value=area, area is string or map */
	Map<String, Object> roots = new HashMap();
	/** key=name, value=children map */
	Map<String, Map> lastProvince = null;
	/** key=name, value=children map */
	Map<String, Map> lastCity = null;
	for (int i = 3; i < sheet.getRows(); i++) {
		String code = trimToNull(sheet.getCell(0, i).getContents());
		String name = trimToNull(sheet.getCell(1, i).getContents());
		if (code == null && name == null) continue;

		if (isProvince(code)) {
			lastProvince = new HashMap();
			lastProvince.put(name, new HashMap());
			roots.put(code, lastProvince);
			continue;
		}

		if (isCity(code)) {
			lastCity = new HashMap();
			lastCity.put(name, new HashMap());
			lastProvince.values().iterator().next().put(code, lastCity);
			continue;
		}

		lastCity.values().iterator().next().put(code, name);
	}
	workbook.close();
	ObjectMapper mapper = new ObjectMapper();
	mapper.writeValue(new File("area2.json"), roots);
}

static String trimToNull(String text) {
	if (text == null) return null;
	text = text.replaceAll("\\s|　|\u00a0", "");
	return text.length() == 0 ? null : text;
}

static boolean isProvince(String code) {
	return code.endsWith("0000");
}

static boolean isCity(String code) {
	return !isProvince(code) && code.endsWith("00");
}
}

iteye_9831

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用区划代码的省市县三级联动下拉框

从网上又找了一份截止2009年底的全国行政区划代码表，重写了省市县三级联动下拉框。如下：test.html[code="html"]body{font-size:14px; font-family:simsun;margin:0;} $(function(){ Area.init('area2.json')...
复制链接

扫一扫