【工作笔记】jquery、ajax省市区级联操作

jsp页面需要做地区级联操作，网上找到一份中国省市区信息并录入到数据库，如下：

后端先获取省级数据：

/**
 * 获取省集合
 */
List<City> cityList = cityService.findCitysByParentId("100000");
model.addAttribute("provinceList",cityList);

页面代码如下：

<div class="form-group has-info">
	<div class="col-xs-12 col-sm-5">
		<select data-province="---- 选择省 ----" id="province" name="province" style="width: 150px;" οnchange="chooseCity('${ctx}');">
			<option>---- 选择省 ----</option>
			<c:forEach items="${provinceList}" var="p">
				<option value="${p.name}" id="${p.id}">${p.name}</option>
			</c:forEach>
		</select>
		<select data-city="---- 选择市 ----" id="city" name="city" style="width: 150px;" οnchange="chooseArea('${ctx}');">
			<option value="" id="" >---- 选择市 ----</option>
		</select>
		<select data-district="---- 选择区 ----" id="district" name="district" style="width: 150px;">
			<option value="" id="" >---- 选择区 ----</option>
		</select>
	</div>
</div>

选择省/市，处理市/县的方法：

var reg = /^[1-9]\d*$/;
/**
 * 处理市
 */
function chooseCity(basepath){
	$("#city").empty();// 清空市
	$("#district").empty();// 清空县
	var re = '<option value="" id="" >' + '---- 选择市 ----' + '</option>';
	$(re).appendTo("#city");
	var rr = '<option value="" id="" >' + '---- 选择区 ----' + '</option>';
	$(rr).appendTo("#district");
	var cityId = $('#province option:selected').attr("id");// 获取选中的省的id
	if(reg.test(cityId)){
		$.ajax({
			url:basepath+"/cityAndCounty/cities?id="+cityId,// 根据省id查询对应市数据
			type:"post",
			success:function(data){
				if(data.code == 1){
					var counties = data.obj;// 得到市级数据
					var result = '';
					// 遍历处理市级数据
					$.each(counties,function(i,v){
						result += '<option value="' + v.name + '" id="' + v.id + '">' + v.name + '</option>';
					});
					// 追加到city下拉框下
					$(result).appendTo("#city");
				}else{
					alert(data.message);
				}
			},
			error:function(data){
				alert(data.message);
			}
		});
	}
}

/**
 * 处理区/县
 * @param cityId
 */
function chooseArea(basepath){
	$("#district").empty();// 清空县
	var re = '<option value="" id="" >' + '---- 选择区 ----' + '</option>';
	$(re).appendTo("#district");
	var proId = $('#city option:selected').attr("id");
	if(reg.test(proId)){
		$.ajax({
			url:basepath+"/cityAndCounty/cities?id="+proId,// 根据市id查询对应县数据
			type:"post",
			success:function(data){
				if(data.code == 1){
					var counties = data.obj;// 得到县级数据
					var result = '';
					// 遍历处理县级数据
					$.each(counties,function(i,v){
						result += '<option value="' + v.name + '" id="' + v.id + '">' + v.name + '</option>';
					});
					// 追加到district下拉框下
					$(result).appendTo("#district");
				}else{
					alert(data.message);
				}
			},
			error:function(data){
				alert(data.message);
			}
		});
	}
}