js实现省市县三级联动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35835118/article/details/83781973

js–省市县联动

首先设置选择框
关键代码如下：
1.首先判断deptLevel字段为数字1-3时分别对应省市县

<td colspan=3>
	<!-- 管理员、部级、省级 -->
		<#if deptLevel lt 2>
		<!-- 市级 -->
		<#elseif deptLevel==3>
		<!-- 县级 -->
		<#else>
		<#if>		
			<select class="u-sel u-ipt-w1" style="width:223px;" id="province" name="province">
				<option value="${UserVo.province}">-请选择-</option>
			</select>
			<select class="u-sel u-ipt-w1" style="width:223px;" id="city" name="city">
				<option value="">-请选择-</option>
			</select>
			<select class="u-sel u-ipt-w1" style="width:223px;" id="town" name="town">
				<option value="">-请选择-</option>
			</select>
  </td>

2.写一个ajax分别获取省市县

//获取行政区划

 $.ajax({
   url:"${base}/province/getProvinceAndAloneCitys1",
   dataType:"json",
   type:"get",
   async:false,
   sunccess:function(result){
	   if(result!=null){
		   $("#province option").remove();
		   $("#province").append("<option value=''>请选择</option>");
		   var code = '${currentUser.deptProIndex!?string}';
		   if(code!=null&&code!=""){
			   code = code.substring(0,2)+"0000";
		   }
		   for(var i=0;i<result.length;i++){
			   var bean = result[i];
			   <#if deptLevel lt 2>
			   		$("#province").append("<option value='"+bean.id+"'>"+bean.name+"<option>");
			   <#else>
			   if(bean.id==code){
				   $("#province").append("<option value='"+bean.id"' selected='selected'>"+bean.name+"</option>");
				   queryCityAndMags(bean.id);
			   }else{
				   $("#province").append("<option value='"+bean.id"'>"+bean.name+"</option>");
			   }
			   </#if>		
		   }
		   <#if deptLevel gt 1>
		   		$("#province").attr("disabled","disabled");
		   <#if>
	   }
   }
});

	function queryCityAndMags(parIndex){
		$.ajax({
			url:"${base}/province/queryCityAndMags",
		})dataType:"json",
		type:"get",
		async:false,//同步，如果没有返回值，是不会执行alert的
		data:{
			"parIndex":parIndex
		},
		success:function(request){
			if(result!=null){
				$("#city option").remove();
				$("#city").append("<option value=''>请选择</option>");
				var code = '${currentUser.deptProvIndex!?string}';
				if(code!=null && code!=""){
					code = code.substring(0.4)+"00";
				}
				for(var i=0;i<result.length;i++){
					var bean = result[i];
					<#if deptLevel gt 2>
						if(bean.id==code){
							$("#city").append("<option value='"+bean.id+"'selected='selected'>"+bean.name+"</option>");
						    getProvinceCitys(bean.id);
						}else{
							$("#city").append("<option value='"+bean.id+"'>"+bean.name+"</option>");
						}
						<#else>
							$("#city").append("<option value='"+bean.id+"'>"+bean.name+"</option>");
						<#if>	
 				}
			}
			<#if deptLevel gt 2>
				$("#city").attr("disabled","disabled");
			</#if>
		}
	}
	<#if deptLevel gt 2>
		$("#city").attr("disabled","disabled");
	</#if>
	}
	});
	}
	$("#province").change(function(){
		var parIndex = $("#province").val();
	});

function getProvinceCitys(parIndex){
	$.ajax({
		url:"${base}/province/getProvinceCitys",
		dataType:"json",
		type:"get",
		async:false,
		data:{
			"parIndex":parIndex
		},
		success:function(result){
			if(result!=null){
				$("#town option").remove();
				$("town").append("<option value=''>请选择</option>");
				var code = '$(currentUser.deptProIndex!?sring)';
				for(var i =0;i<result.length;i++){
					var bean =result[i];
					<#if deptLevel gt 3>
						if(bean.id==code){
							$("#town").append("<option value='"+bean.id+"' selected='selected'>"+bean.name+"</option>");
						}else{
							$("#town").append("option value='"+bean.id+"'>"+bean.name+"</option>");
						}
						<#else>
							$("#town").append("<option value='"+bean.id+"'>"+bean.name+"</option>");
							</#if>
				}
			}
		}
	});
}
$("#city").change(function(){
	var parIndex = $("#city").val();
	getProvinceCityts(parIndex);
});