2019独角兽企业重金招聘Python工程师标准>>> 
基于jquery实现
js
var selectCon = [
{"id" : "#countryID","name" : "国家"},
{"id" : "#provinceID","name" : "省份"},
{"id" : "#cityID","name" : "城市"},
{"id" : "#countyID","name" : "地区"}
];
/** 移除全部选择项内容,并添加默认提示信息,参数selectCon的下标*/
function removeOption() {
var id = "";
var option = "";
for ( var i = 0; i < arguments.length; i++) {
id = selectCon[arguments[i]].id;
option = id + " option";
$(option).remove();
$(id).append(
"请选择" + selectCon[arguments[i]].name
+ "");
}
};
/** 追加选择项内容，参数：要添加的jqueryId，行政区域父id*/
function addOption(jqueryId, parentId) {
if (!parentId) {
return;
}
var url = "${pageContext.request.contextPath}/district/getDistricte.do";
$.post(url, {
"parentId" : parentId
}, function(jsonString) {
var size = jsonString.length;
var option = "";
for ( var i = 0; i < size; i++) {
option += ""
+ jsonString[i].name + "";
}
$(jqueryId).append(option);
//console.log(option);
});
};
//国家-省
$("#countryID").change(function() {
var parentId = $("#countryID option:selected").val();
removeOption(1, 2, 3);
addOption("#provinceID", parentId);
});
//省份-城市
$("#provinceID").change(function() {
var parentId = $("#provinceID option:selected").val();
removeOption(2, 3);
addOption("#cityID", parentId);
});
//城市-区域
$("#cityID").change(function() {
var parentId = $("#cityID option:selected").val();
removeOption(3);
addOption("#countyID", parentId);
}); html产品可见地区：
请选择国家
中国
请选择省份
请选择城市
请选择地区 返回的格式示例：
[
{
"id": 3,
"parentId": 2,
"code": "110100",
"name": "北京市辖区"
},
{
"id": 18,
"parentId": 2,
"code": "110200",
"name": "\n县"
}
]CREATE TABLE `tb_district` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent_id` int(11) DEFAULT NULL, COMMENT '父id'
`code` varchar(6) NOT NULL DEFAULT '' COMMENT '行政编码',
`name` varchar(255) NOT NULL DEFAULT '' COMMENT '行政名称',
PRIMARY KEY (`id`),
UNIQUE KEY `uni_district_code` (`code`),
KEY `parent_id` (`parent_id`),
) ENGINE=InnoDB AUTO_INCREMENT=3515 DEFAULT CHARSET=utf8 COMMENT='行政编码表';