若依RuoYi框架中增加和修改页面如何实现省市县地址的三级联动功能

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.此次用的省市县的地址资源是存于一张表中，直接调取后台方法进行查询的。