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

最新推荐文章于 2022-04-01 10:12:24 发布

苦的是咖啡

最新推荐文章于 2022-04-01 10:12:24 发布

阅读量1.8w

点赞数

分类专栏： Java js 文章标签： js html Java

Java 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

test.html

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

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的时候再按照区划代码进行排序。

Json代码

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

格式转换工具：

Java代码

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

苦的是咖啡

关注

0
点赞
踩
0

收藏

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

test.html 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> scrip
复制链接

扫一扫