1.实现省市县地址三级联动,页面效果如下:
2.业务要求介绍:在该业务中,增加和修改页面有省市县三个下拉框,三个下拉框需有联动功能,且选完之后,不仅得到省市县的编码,而且也能得到相对应的省市县名称,最后提交一起保存到数据库中。
3.增加页面的代码如下:
a.省市县三个下拉框增加页面标签代码如下:
<div class="form-group">
<!-- <label class="col-sm-3 control-label">省份编码:</label> -->
<label class="col-sm-3 control-label">省份名称:</label>
<div class="col-sm-8">
<select id="province" class="form-control m-b" name="belongAreaCode">
<option value="0">--请选择省份--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">省份名称:</label>
<div class="col-sm-8">
<input name="belongAreaName" id="belongAreaName" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">城市编码:</label> -->
<label class="col-sm-3 control-label">城市名称:</label>
<div class="col-sm-8">
<select id="city" class="form-control m-b" name="ivtStr1">
<option value="0">--请选择市区--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">城市名称:</label>
<div class="col-sm-8">
<input name="ivtStr2" id="ivtStr2" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">区县编码:</label> -->
<label class="col-sm-3 control-label">区县名称:</label>
<div class="col-sm-8">
<select id="area" class="form-control m-b" name="ivtStr3">
<option value="0">--请选择县城--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">区县名称:</label>
<div class="col-sm-8">
<input name="ivtStr4" id="ivtStr4" class="form-control" type="text">
</div>
</div>
b.增加页面实现下拉数据显示和三级联动效果JS中的代码如下:
<script type="text/javascript">
var start_provinceId = "";
var start_cityId = "";
var start_countyId = "";
//页面一加载调取后台查询全部省份的方法
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": start_provinceId,
"cityId": start_cityId,
"countyId": start_countyId
},
success:function(data){
$(data.provinceNameList).each(function(a,b){
$("#province").append("<option value='"+b.provinceId+"'>"+b.provinceName+"</option>");
});
},
error:function(){
}
});
//选择省份,保存省份编码和对应名称,以及联动市级下拉框数据
$("#province").change(function(){
var p_provinceId = "";
var p_cityId = "";
var p_countyId = "";
$("#city").empty();
$("#area").empty();
var a = $("#province option:selected").text();
$("#belongAreaName").val(a);
var p_provinceId = $("#province").val();
$("#city").append("<option value='0'>--请选择市区--</option>");
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": p_provinceId,
"cityId": p_cityId,
"countyId": p_countyId
},
success:function(data){
$(data).each(function(a,b){
$("#city").append("<option value='"+b.cityId+"'>"+b.cityName+"</option>");
});
},
error:function(){
}
});
});
//选择城市,保存城市编码和对应名称,以及联动县级下拉框数据
$("#city").change(function(){
var c_provinceId = "";
var c_cityId = "";
var c_countyId = "";
$("#area").empty();
var c_cityId = $("#city").val();
var a = $("#city option:selected").text();
$("#ivtStr2").val(a);
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": c_provinceId,
"cityId": c_cityId,
"countyId": c_countyId
},
success:function(data){
$(data).each(function(a,b){
$("#area").append("<option value='"+b.countyId+"'>"+b.countyName+"</option>");
});
},
error:function(){
}
});
});
//选择区县,保存区县编码和对应名称
$("#area").change(function(){
$("#town").empty();
var a = $("#area option:selected").text();
$("#ivtStr4").val(a);
});
</script>
4.修改页面的代码如下:
a.省市县三个下拉框修改页面标签代码如下:
<div class="form-group">
<!-- <label class="col-sm-3 control-label">省份编码:</label> -->
<label class="col-sm-3 control-label">省份名称:</label>
<div class="col-sm-8">
<select id="province" class="form-control m-b" name="belongAreaCode" >
<option value="0">--请选择省份--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">省份名称:</label>
<div class="col-sm-8">
<input name="belongAreaName" id="belongAreaName" th:field="*{belongAreaName}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">城市编码:</label> -->
<label class="col-sm-3 control-label">城市名称:</label>
<div class="col-sm-8">
<select id="city" class="form-control m-b" name="ivtStr1">
<option value="0">--请选择市区--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">城市名称:</label>
<div class="col-sm-8">
<input name="ivtStr2" id="ivtStr2" th:field="*{ivtStr2}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<!-- <label class="col-sm-3 control-label">区县编码:</label> -->
<label class="col-sm-3 control-label">区县名称:</label>
<div class="col-sm-8">
<select id="area" class="form-control m-b" name="ivtStr3">
<option value="0">--请选择县城--</option>
</select>
</div>
</div>
<div class="form-group" hidden>
<label class="col-sm-3 control-label">区县名称:</label>
<div class="col-sm-8">
<input name="ivtStr4" id="ivtStr4" th:field="*{ivtStr4}" class="form-control" type="text">
</div>
</div>
b.修改页面实现下拉数据显示和三级联动效果JS中的代码如下:
<script type="text/javascript">
var start_provinceId = "";
var start_cityId = "";
var start_countyId = "";
//页面一加载查询后台数据,与数据库原先省市县保存的数据进行匹配,并显示三个在下拉框中
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": start_provinceId,
"cityId": start_cityId,
"countyId": start_countyId
},
success:function(data){
//获取当前修改页面省份名称
var shenCode = $("#belongAreaName").val();
//遍历所有省份集合
$(data.provinceNameList).each(function(a,b){
//把遍历的省份名称与当前进行匹配
if(b.provinceName == shenCode){
//加入标签操作
$("#province").append("<option value='"+b.provinceId+"' selected>"+b.provinceName+"</option>");
//省份匹配成功后,以当前省份id作为条件,调取后台查询该省份下所有城市的方法
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": b.provinceId,
"cityId": "",
"countyId": ""
},
success:function(data){
//获取当前修改页面城市名称
var shiCode = $("#ivtStr2").val();
//遍历所有该省份下城市集合
$(data).each(function(a,b){
//把遍历的城市名称与当前页面城市匹配
if(b.cityName == shiCode){
//加入标签操作
$("#city").append("<option value='"+b.cityId+"' selected>"+b.cityName+"</option>");
//城市匹配成功后,以当前城市id作为条件,调取后台查询该城市下所有区县的方法
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": "",
"cityId": b.cityId,
"countyId": ""
},
success:function(data){
//获取当前修改页面区县名称
var xianCode = $("#ivtStr4").val();
//遍历所有该城市下区县集合
$(data).each(function(a,b){
//把遍历的区县名称与当前页面获取区县进行匹配
if(b.countyName == xianCode){
//加入标签操作
$("#area").append("<option value='"+b.countyId+"' selected>"+b.countyName+"</option>");
}else{
//加入标签操作(未匹配上当前区县)
$("#area").append("<option value='"+b.countyId+"'>"+b.countyName+"</option>");
}
});
},
error:function(){
}
});
}else{
//加入标签操作(未匹配上当前城市)
$("#city").append("<option value='"+b.cityId+"'>"+b.cityName+"</option>");
}
});
},
error:function(){
}
});
}else{
//加入标签操作(未匹配上当前省份)
$("#province").append("<option value='"+b.provinceId+"'>"+b.provinceName+"</option>");
}
});
},
error:function(){
}
});
//选择省份,保存省份编码和对应名称,以及联动市级下拉框数据
$("#province").change(function(){
var p_provinceId = "";
var p_cityId = "";
var p_countyId = "";
$("#city").empty();
$("#area").empty();
var a = $("#province option:selected").text();
$("#belongAreaName").val(a);
var p_provinceId = $("#province").val();
$("#city").append("<option value='0'>--请选择市区--</option>");
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": p_provinceId,
"cityId": p_cityId,
"countyId": p_countyId
},
success:function(data){
$(data).each(function(a,b){
$("#city").append("<option value='"+b.cityId+"'>"+b.cityName+"</option>");
});
},
error:function(){
}
});
});
//选择城市,保存城市编码和对应名称,以及联动县级下拉框数据
$("#city").change(function(){
var c_provinceId = "";
var c_cityId = "";
var c_countyId = "";
$("#area").empty();
var c_cityId = $("#city").val();
var a = $("#city option:selected").text();
$("#ivtStr2").val(a);
$("#area").append("<option value='0'>--请选择县城--</option>");
$.ajax({
url:ctx + "area/area/selectSuitedAdrress",
type:"post",
dataType:"json",
data:{
"provinceId": c_provinceId,
"cityId": c_cityId,
"countyId": c_countyId
},
success:function(data){
$(data).each(function(a,b){
$("#area").append("<option value='"+b.countyId+"'>"+b.countyName+"</option>");
});
},
error:function(){
}
});
});
//选择区县,保存区县编码和对应名称
$("#area").change(function(){
$("#town").empty();
var a = $("#area option:selected").text();
$("#ivtStr4").val(a);
});
</script>
5.提示如下:
a.代码中调取方法都是同一个方法,因为我在后台全部写成了一个方法,可以根据传参的有无得到不同的数据集合的。
b.此次用的省市县的地址资源是存于一张表中,直接调取后台方法进行查询的。