省市区的三级联动

使用技术：java+mysql+ajax

 1. 前端页面

1.1 表单样式

<div class="control-group">
			<label class="control-label">发货所在地区：</label>
			<select style="width:150px;" class="input-xlarge required" name="sourceProvince" id="addr_province" onchange="receiptCity(this)" >
				<c:if test="${ysStock.sourceCity == null }">
					<option selected="selected"  value="">请选择省份</option>
				</c:if>
				<c:if test="${ysStock.sourceProvince != null }">
					<option selected="selected" value="${provinceId}">${ysStock.sourceProvince}</option>
				</c:if>

			</select>
			<select style="width:150px;" class="input-xlarge required" name="sourceCity" id="addr_city" onchange="receiptZoning(this)" >
				<c:if test="${ysStock.sourceCity == null }">
					<option selected="selected"  value="">请选择城市</option>
				</c:if>
				<c:if test="${ysStock.sourceCity != null }">
					<option selected="selected"  value="${cityId}">${ysStock.sourceCity}</option>
				</c:if>
			</select>

			<select style="width:150px;" class="input-xlarge required" name="sourceZoning" id="addr_zoning" >
				<c:if test="${ysStock.sourceZoning == null }">
					<option  selected="selected"  value="" >请选择区县</option>
				</c:if>
				<c:if test="${ysStock.sourceZoning != null }">
					<option  selected="selected"  value="${zoningId}" >${ysStock.sourceZoning}</option>
				</c:if>
			</select>
		</div>

1.2 页面加载

	<script type="text/javascript">
		$(document).ready(function() {
			initProvince();
			let provinceId='${provinceId}';
			let cityId='${cityId}';
			let zoningId='${zoningId}';

			if(provinceId){
				receiptCity(provinceId);
			}if(cityId){
				receiptZoning(cityId);
			}

			if (provinceId) {
				$('#addr_province').val(provinceId).trigger('change');
			}
			if (cityId) {
				$('#addr_city').val(cityId).trigger('change');
			}
			if (zoningId) {
				$('#addr_zoning').val(zoningId);
			},	
           
				submitHandler: function(form){
					//console.log("latitude: ", $('#latitude').val());
					//console.log("longitude: ", $('#longitude').val());

					// Check if longitude or latitude is set to '1'
					if ($('#longitude').val() =='' || $('#latitude').val() =='') {
						myConfirm("系统提示：","请先在地图中进行选点！")
						return;
					}
					trimInput();
					loading('正在提交，请稍等...');
					form.submit();
					//返回上一页
					//goBack();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
    function initProvince(){
			//获取省份列表
			$.ajax({
				url:"${ctx}/security/address/parent",
				type: "post",
				data : {"id" : "1"},
				cache : false,
				async : false,
				dataType : 'JSON',
				success: function (data) {

					let addrProvince = document.querySelector('#addr_province');
					// 清空当前选项
					addrProvince.innerHTML = "";

					// 默认选项
					let defaultOption = "<option value=''>请选择省份</option>";
					addrProvince.innerHTML += defaultOption;

					for (var a = 0; a < data.length; a++) {
						option="<option value="+data[a].id+">"+data[a].name+"</option>"
						addrProvince.innerHTML += option;
					}

				},
				error: function (xhr, status, error) {
					console.error('发生错误：' + error);
					alert("发生错误，请稍后再试！");
				}
			});
		}
		function receiptCity(val){
			var id;
			if(!isNaN(val)){
				id=val;
			}else{
				id=$(val).val();
			}
			//alert("选中的省份id是"+id)
			//根据选中的省份id获取城市列表
			$.ajax({
				url:"${ctx}/security/address/parent",
				type: "post",
				data : {"id" : id},
				cache : false,
				async : false,
				dataType : 'JSON',
				success: function (data) {

					let addrCity = document.querySelector('#addr_city');
					// 清空当前选项
					addrCity.innerHTML = "";

					// 默认选项
					let defaultOption = "<option value=''>请选择城市</option>";
					addrCity.innerHTML += defaultOption;

					for (var a = 0; a < data.length; a++) {
						option="<option value="+data[a].id+">"+data[a].name+"</option>"
						addrCity.innerHTML += option;
					}

				},
				error: function (xhr, status, error) {
					console.error('发生错误：' + error);
					alert("发生错误，请稍后再试！");
				}
			});
		}
		function receiptZoning(val){
			var id;
			if(!isNaN(val)){
				id=val;
			}else{
				id=$(val).val();
			}
			//alert("选中的城市id是"+id);
			$.ajax({
				url:"${ctx}/security/address/parent",
				type: "post",
				data : {"id" : id},
				cache : false,
				async : false,
				dataType : 'JSON',
				success: function (data) {

					let addrZoning = document.querySelector('#addr_zoning');
					// 清空当前选项
					addrZoning.innerHTML = "";

					// 默认选项
					let defaultOption = "<option value=''>请选择区县</option>";
					addrZoning.innerHTML += defaultOption;

					for (var a = 0; a < data.length; a++) {
						option="<option value="+data[a].id+">"+data[a].name+"</option>"
						addrZoning.innerHTML += option;
					}

				},
				error: function (xhr, status, error) {
					console.error('发生错误：' + error);
					alert("发生错误，请稍后再试！");
				}
			});
		}
	</script>

2. 后端代码

	@RequestMapping(value = {"security/address/parent"})
	@ResponseBody
	public List<Arearegion> parent(String id,HttpServletRequest request,Model model){
		Arearegion arearegion=new Arearegion();
		arearegion.setParentId(id);
		List<Arearegion> list = arearegionService.getArearegionListBypid(arearegion);
		
		return list;
	}