没想到html三级联动居然这么简单!!!

三级联动常常用于表单的省市县的选择,虽然网上有现成的代码,但自己真正理解其原理才是王道.

1. 首先,原理很简单,没有太复杂的逻辑结构,最核心的关键就是你存储的省市县的数据结构.
2. 直接使用最简单的数据来存储数据:
   var sheng=[“请选择省份”,“安徽省”,“辽宁省”,“江苏省”]--------对于省来说,一个一维数据就可以了
   var shi=[[“请选择市”],[“合肥市”,“阜阳市”,“淮南市”],[“沈阳市”,“盘锦市”,“铁岭市”],[“南京市”,“杭州市”,“扬州市”]]-----------对于市来说,一个二维数组就可以了.
   var xian=[[“请选择县”],[[“瑶海区”,“肥东县”,“肥西县”],[“阜南县”,“太和县”,“临泉县”],[“AA”,“BBB”]],[]]----后面其他县我暂时不写了,这其实是一个三维数组,所以一定要好好分析结构.
3. 当我们数据定义好了之后,也就水到渠成了,首先我们定义三个下拉框,

<select id="sheng"></select>
<select id="shi"></select>
<select id="xian"></select>

这个时候就是写js代码了,我使用了jq,所以导入jq库文件等我就不说了
具体分析一下思路:

1. 当我们点击省这个下拉框的其中一个选项时,市和县的一起改变,所以我们首先写好省级的下拉框的点击事件:

$(sheng).each(function(index,ele){
				$("#sheng").append($("<option value='"+index+"'>"+ele+"</option>"))
			})
$(shi[0]).each(function(index,ele){
				$("#shi").append($("<option>"+ele+"</option>"))
			})
$(xian[0]).each(function(index,ele){
				$("#xian").append($("<option>"+ele+"</option>"))
			})			

使用jq的遍历来获取省这个数据中的所以数据,然后添加到下拉框中,此时其他市级和县级的下拉框只获取数组中下标为0的[请选择市/县]

("#sheng").change(function(){
				$("#shi option").remove();
				$("#xian option").remove();
				var index=$("#sheng").val();
				$(shi[index]).each(function(index,ele){
					$("#shi").append($("<option value='"+index+"'>"+ele+"</option>"))
				})
				var index2=$("#sheng").val();
				if(parseInt(index2)==0){
					$("#xian").append($("<option>请选择县</option>"))
				}
			
				$(xian[index2][0]).each(function(index,ele){
					$("#xian").append($("<option value='"+index+"'>"+ele+"</option>"))
				})
})

当我们每次点击省时都要先让市和县的下拉框选项清空然后再根据新点击的省来进行内容绑定,并且我们通过给下拉选项绑定的value值来精准找到其属于什么省什么市,所以三个循环遍历通过数组的关系来显示,同理当我们进行市的点击来绑定县也是一样,都是通过这个value来准确找到数组中他们的关系然后遍历绑定.

$("#shi").change(function(){
				$("#xian option").remove();
				var index=$("#shi").val();
				var index2=$("#sheng").val();
				
				$(xian[index2][index]).each(function(index,ele){
					$("#xian").append($("<option value='"+index+"'>"+ele+"</option>"))
				})
			})

以上就是三级联动的核心思想了:以下的完整代码:

<script>
			$(function(){
			var sheng=["请选择省份","安徽省","辽宁省","江苏省"];
			var shi=[["请选择市"],["合肥市","阜阳市","淮南市"],["沈阳市","盘锦市","铁岭市"],["南京市","杭州市","扬州市"]];
			var xian=[["请选择县"],[["瑶海区","肥东县","肥西县"],["阜南县","太和县","临泉县"],["AA","BBB"]],[]]
			
			$(sheng).each(function(index,ele){
				$("#sheng").append($("<option value='"+index+"'>"+ele+"</option>"))
			})
			$(shi[0]).each(function(index,ele){
				$("#shi").append($("<option>"+ele+"</option>"))
			})
			$(xian[0]).each(function(index,ele){
				$("#xian").append($("<option>"+ele+"</option>"))
			})
			
			$("#sheng").change(function(){
				$("#shi option").remove();
				$("#xian option").remove();
				var index=$("#sheng").val();
				$(shi[index]).each(function(index,ele){
					$("#shi").append($("<option value='"+index+"'>"+ele+"</option>"))
				})
				var index2=$("#sheng").val();
				if(parseInt(index2)==0){
					$("#xian").append($("<option>请选择县</option>"))
				}
			
				$(xian[index2][0]).each(function(index,ele){
					$("#xian").append($("<option value='"+index+"'>"+ele+"</option>"))
				})
			})
		
			
			$("#shi").change(function(){
				$("#xian option").remove();
				var index=$("#shi").val();
				var index2=$("#sheng").val();
				
				$(xian[index2][index]).each(function(index,ele){
					$("#xian").append($("<option value='"+index+"'>"+ele+"</option>"))
				})
			})
			})
			
		</script>