使用技术: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;
}