写了一个省市县三级联动的下拉框：
先看一下用法：
test.html,依赖于jquery和一个JS文件。
<!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"></span>
<input id="getValueBtn" type="button" value="getValue">
</body>
</html>
<script type="text/javascript">
$(function(){
Area.init('area.json');
var area = new Area('#areaContainer');
area.select(['北京', '海淀区']);
$('#getValueBtn').click(function(){
alert(area.getAddress());
});
});
</script>
Area.js
function Area(selector){
if(!Area.ALL_AREAS){
throw new Error('areas not init！');
}
this.selector = selector;
$(this.selector).html('<select/><select/><select/>');
var $province = this._getElement(Area.code.PROVINCE);
var $city = this._getElement(Area.code.CITY);
var $county = this._getElement(Area.code.COUNTY);
var self = this;
$province.change(function(){
var province = this.value;
$city.html(self._getOptions([province]));
var city = $city.val();
$county.html(self._getOptions([province, city]));
});
$city.change(function(){
var province = $province.val();
var city = this.value;
$county.html(self._getOptions([province, city]));
});
$province.html(self._getOptions());
this.select();
}
$.extend(Area, {
ALL_AREAS : null,
code : {
PROVINCE : 0,
CITY : 1,
COUNTY : 2
},
init : function(url){
if(Area.ALL_AREAS) return;
Area.ALL_AREAS = $.parseJSON($.ajax({
url : url,
async : false
}).responseText);
}
});
Area.prototype = {
_getElement : function(code){
return $(this.selector).find('select').eq(code);
},
select : function(address){
var address = address || [];
var $province = this._getElement(Area.code.PROVINCE);
var $city = this._getElement(Area.code.CITY);
var $county = this._getElement(Area.code.COUNTY);
var province = address.length < 1 ? '' : address[0];
$province.val(province);
$city.html(this._getOptions([province]));
var city = address.length < 2 ? '' : address[1];
$city.val(city);
$county.html(this._getOptions([province, city]));
var county = address.length < 3 ? '' : address[2];
$county.val(county);
},
getAddress : function(){
var $province = this._getElement(Area.code.PROVINCE);
var $city = this._getElement(Area.code.CITY);
var $county = this._getElement(Area.code.COUNTY);
return [$province.val(), $city.val(), $county.val()];
},
_getAreaName : function(area){
if(typeof(area) == 'string') return area;
for(var o in area){
return o;
}
},
_getAreas : function(areaName, superAreas){
for(var i=0; i<superAreas.length; i++){
if(this._getAreaName(superAreas[i]) == areaName)
return superAreas[i][areaName] || [];
}
return [];
},
_getAreasByAddress : function(address){
var areas = Area.ALL_AREAS;
for(var i=0; i<address.length; i++){
areas = this._getAreas(address[i], areas);
}
return areas;
},
_getAreaNames : function(address){
var areas = this._getAreasByAddress(address);
var areaNames = [];
for(var i=0; i<areas.length; i++){
areaNames.push(this._getAreaName(areas[i]));
}
return areaNames;
},
_getOption : function(optionName){
return '<option value="' + optionName + '">' + optionName + '</option>';
},
_getOptions : function(address){
var address = address || [];
var areaNames = this._getAreaNames(address);
var options = '<option value="">请选择</option>';
for(var i=0; i<areaNames.length; i++){
options += this._getOption(areaNames[i]);
}
return options;
}
};
area.json的示例：
[{"北京" : null
}, {"广东" :
["广州", {"珠海" : ["香洲", "金湾", "斗门"]
}]
}]
另外，提示一下，在chrome下面测试的时候，记得要加启动参数(允许本地ajax访问) --allow-file-access-from-files
从网上找了一份全国行政区划的EXCEL文件，转成了area.json数据：
public class Test {
public static void main(String[] args) throws Exception {
Workbook workbook = Workbook.getWorkbook(Test.class.getResourceAsStream("行政区划.xls"));
Sheet sheet = workbook.getSheet(0);
List<Map> roots = new ArrayList<Map>();
Map<String, List> lastProvince = null;
Map<String, List> lastCity = null;
for (int i = 2; i < Integer.MAX_VALUE; i++) {
String province = trimToNull(sheet.getCell(0, i).getContents());
String city = trimToNull(sheet.getCell(2, i).getContents());
String county = trimToNull(sheet.getCell(3, i).getContents());
if (province == null && city == null && county == null) break;
if (province != null) {
if (city == null) throw new RuntimeException("数据错误！" + province + "," + city + "," + county);
lastProvince = new HashMap();
roots.add(lastProvince);
List<Map> cities = new ArrayList<Map>();
lastProvince.put(province, cities);
}
if (city != null) {
lastCity = new HashMap();
lastProvince.values().iterator().next().add(lastCity);
List<String> counties = new ArrayList<String>();
lastCity.put(city, counties);
}
lastCity.values().iterator().next().add(county);
}
workbook.close();
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(System.out, roots);
}
static String trimToNull(String text) {
if (text == null) return null;
text = text.replaceAll("\\s", "");
return text.length() == 0 ? null : text;
}
}
分享到：
thanks@
相关推荐
本文将详细介绍如何使用HTML、JavaScript（通常配合jQuery）以及可能涉及的CSS来实现"layui-省市县三级联动下拉框"的功能，并探讨其可扩展性。 首先，`layui`是一个流行的前端UI框架，它提供了一套美观、响应式的...
在IT开发领域，尤其在前端开发中，"layui-省市县三级联动下拉框效果"是一种常见的需求，常用于地址选择、区域筛选等场景。Layui是一个优秀的国产前端UI框架，它提供了丰富的组件和API，使得开发者可以方便地实现各种...
本项目"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件开发实例，它利用layui和vue.js来实现地理信息的三级联动选择功能。 首先，我们来了解一下layui。layui是一款中国本土的开源前端框架，它提供了...
总的来说，利用jQuery解析XML文件并实现省市县三级联动下拉框，需要理解XML结构，掌握jQuery的DOM操作和事件处理，以及良好的编程实践。这个过程对于提升前端开发技能，特别是数据处理和交互设计能力大有裨益。
包里有数据库文件，可以导入，包引入后用tomcat就能启动，servlet是通过JSP格式完成联动框，servlet02是通过json格式完成联动框，jdbc已经封装写好，用户名密码只需要改变数据库配置文件即可，Ajax也封装成js文件，...
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范...其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
在构建省市区三级联动下拉框时，我们可以利用其提供的行政区划数据。 1. **获取数据**： 百度地图提供了JSON格式的行政区划数据，可以通过API接口获取。通常，这些数据包括省份、城市、区县等各级行政区域的信息。...
NULL 博文链接：https://sswh.iteye.com/blog/1551912
在IT领域，"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计，尤其在网站表单中，用于用户选择地理位置时。这个技术基于AJAX（Asynchronous JavaScript and XML），它允许网页在不刷新整个页面的情况下与...
这个“jQuery省市区三级联动下拉框”是一个利用jQuery库实现的解决方案，它基于jQuery 1.8.2的迷你版本（jquery-1.8.2.min.js）进行构建。下面我们将详细探讨这一技术实现及其相关知识点。 首先，jQuery是一个广泛...
本项目是基于layui框架实现的省市区三级联动下拉框，这是一个常见的前端表单元素，常用于地址选择或定位功能。layui是一款轻量级的前端组件库，它提供了丰富的UI组件，易于使用且性能优异，特别适合快速构建中大型...
以XML文件为数据源，兼容不同浏览器，主要借助jquery来完成。 在网上找了好几个，要么就是不能跨浏览器，要么就是数据直接写在脚本中，不方便更改，干脆自己做一个。 效率问题没考虑，希望有高手给看看，能否优化...
省市区三级联动下拉框选择
在ASP（Active Server Pages）开发中，经常需要实现一种功能，即省市县三级联动的下拉选择框。这种功能在很多网站的地址填写或者信息录入中十分常见，它能够帮助用户方便快捷地选择所在地。标题提到的“asp省市县三...
"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件，它利用layui框架来实现一个功能强大的交互式选择器，帮助用户在网页上便捷地选择省份、城市和区县。 layui是一款轻量级的前端UI框架，它的设计目标是...
实现效果： jQuery实现select省市区三级联动下拉框，通过选择省，市区的值随之变化，非常适用于企业网站或者商城网站，用户在注册的时候填写的信息。php中文网推荐下载！
在网页开发中，"JS+XML 省市区 三级联动下拉框"是一种常见的交互设计，用于用户选择他们的地理位置，如省、市、区。这个功能通常在注册、填写地址等场景中出现，能够提供良好的用户体验，因为它使得用户可以通过简单...