javascript利用selected属性实现省市区三级联动

javascript实现省市区三级联动

原理是根据<select>选框下<option>的selected属性来确定上一个值被选中，确定数组下标，传递给下一个数组作为循环结束值。

这是页面未进行任何操作时的原始界面。

这是点击省份下拉列表中的一个选项之后，城市与区县，均会默认选中第一个。

下面看代码：

html只定义了三个select框

省份：<select id="province" οnchange="cityShow()"></select>
城市：<select id="city" οnchange="areaShow()"></select>
区/县<select id="area"></select>

省份，城市，区县分别是一维、二维、三维数组

var provinceArr=["请选择省份","四川","重庆","云南"];
var cityArr=[["请选择城市"],
             ["成都","达州","绵阳"],
             ["万州","沙坪坝"],
             ["昆明","大理","丽江"]];
var areaArr=[[["请选择区域"]],
             [["锦江区","青羊区","金牛区","高新区"],["达县","渠县"],["绵阳市1","绵阳市2"]],
             [["五桥","百安"],["西永","大学城"]],
             [["昆明市1","昆明市2"],["洱海","苍山","下关"],["古城","玉龙县"]]];

对数据进行初始化。

用了三个for（）嵌套循环。这里代码我都是复制粘贴，修改循环变量和节点对象。

逻辑很简单，先无脑将省份数组里的数据添加到pro下拉选框中，当选中某个省份时，能够获取到下标值，将这个下标值作为cityArr数组里的第一个索引值，此时cityArr[i] 就相当于一个一维数组了，再来循环里面的数据。

同理，取到i ，j 之后，作为areaArr的前两个索引值，再来找areaArr[i][j]里的值，即区县。

//定义全局变量
var pro=document.getElementById("province");
var city=document.getElementById("city");
var area=document.getElementById("area");

// 初始化，将省份的数组传到页面option里面
for(var i=0;i<provinceArr.length;i++){
	//创建节点对象，创建节点的内容，将内容写入到节点对象中去，并添加到上一个父节点
    	var proSel=document.createElement("option");
    	var proTxt=document.createTextNode(provinceArr[i]);
    	proSel.appendChild(proTxt);
    	pro.appendChild(proSel);
    	
    	//将城市的数组传到页面option里面
    	if(pro[i].selected){
    		for(var j=0;j<cityArr[i].length;j++){
    			//创建节点对象，创建节点的内容，将内容写入到节点对象中去，并添加到上一个父节点
    			  var citySel=document.createElement("option");
    			  var cityTxt=document.createTextNode(cityArr[i][j]);
    			  citySel.appendChild(cityTxt);
    			  city.appendChild(citySel);
    			
    			//将区县的数组传到页面option里面
    			  if(city[j].selected){
    				  for(var k=0;k<areaArr[i][j].length;k++){
    	                  var areaSel=document.createElement("option");
    	                  var areaTxt=document.createTextNode(areaArr[i][j][k]);
    	                  areaSel.appendChild(areaTxt);
    	                  area.appendChild(areaSel);
    			  }
    		}
    	}
    }
}

页面初始化之后，就要根据事件往里面添加数据了。

用select框的onchange事件来写。

这里有个 清空函数，最后来讲。

这一块是对province的onchange响应事件，因为我们已经选择了一个省份了，所以只要让后面的城市和区县知道我选的省份的下标就好。

//构造函数，点击province下拉列表，响应onchange事件，对city进行操作
function cityShow(){
	//先清空上一次操作可能留下的数据
        delAll("city");	
        delAll("area");
	
	            for(var i=0;i<pro.length;i++){
	            	if(pro[i].selected){
	            		for(var j=0;j<provinceArr[i].length;j++){
	            			var citySel=document.createElement("option");
	                        var cityTxt=document.createTextNode(cityArr[i][j]);
	                        citySel.appendChild(cityTxt);
	                        city.appendChild(citySel);	           
	                //将区县的数组传到页面option里面
	                  if(city[j].selected){
	                      for(var k=0;k<areaArr[i][j].length;k++){
	                          var areaSel=document.createElement("option");
	                          var areaTxt=document.createTextNode(areaArr[i][j][k]);
	                          areaSel.appendChild(areaTxt);
	                          area.appendChild(areaSel);
	                  }
	            }
	        }
	    }
	}
}

对city的onchange事件。我们只要判断pro[i]和city[j]是否同时被选中，这样就能将i，j的值传给areaArr了，而不用往城市下拉框里去添加数据。

//构造函数，点击city下拉列表，响应onchange事件，对area进行操作
function areaShow(){
	//先清空上一次操作可能留下的数据
	delAll("area");
	for(var i=0;i<pro.length;i++){
		//省份被选中的情况下，取proArr数组的下标，作为cityArr数组（二维数组）的第一个索引值
		if(pro[i].selected){
			for(var j=0;j<cityArr[i].length;j++){
				//省份与城市被选中的情况下，取cityArr数组（二维数组）的两个索引值，作为areaArr数组（三维数组）的第一个个索引值
				if(city[j].selected){
					for(var k=0;k<areaArr[i][j].length;k++){
						var areaSel=document.createElement("option");
                        var areaTxt=document.createTextNode(areaArr[i][j][k]);
                        areaSel.appendChild(areaTxt);
                        area.appendChild(areaSel);
					}
				}
			}
		}
	}
}

做到这里其实三级联动的功能已经能实现了，但是

咦?为什么绵阳市1 2出现了两次呢？

原因就是：

我每一次选择的时候，上一次操作遗留下来的数据没有被清空，当我再点击的时候，进行循环判定之后，会再次写入到下拉框当中。

所以有必要在每次onchange操作的时候，将之前的数据全部清空，再往里面写入这次操作对应的数据。

封装一个清空子节点的函数，只需在onchange事件函数头部将city或者area传入到这里面去，就能执行清空操作，再次写入，就完全不受影响啦~   

在我上面的代码里面已经添加了这句话。

function delAll(theId){
    var theOb=document.getElementById(theId);
    var arr=theOb.childNodes;
    for(var j=arr.length;j>0;j--){  
    	theOb.removeChild(arr[j-1]);   
    }
}

再来看看效果，就是图2的样子了。

虽然这种方法代码行比较多，但是逻辑较简单，代码还可以直接复制（我只写了第一个循环和添加节点和内容），后面都是copy，综上还是一个不错的适合新手的方法。

下面贴上我用jquery写的三级联动，代码量更少，操作更简单，实现的功能也更实际点击查看jquery实现三级联动