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

javascript实现省市区三级联动

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

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

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

下面看代码：

html只定义了三个select框

省份：<select id="province" onchange="cityShow()"></select>城市：<select id="city" onchange="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实现三级联动