javascript利用selected属性实现省市区三级联动
javascript实现省市区三级联动
原理是根据
这是页面未进行任何操作时的原始界面。
这是点击省份下拉列表中的一个选项之后，城市与区县，均会默认选中第一个。
下面看代码：
html只定义了三个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页面初始化之后，就要根据事件往里面添加数据了。
用select框的onchange事件来写。
这里有个 清空函数，最后来讲。
这一块是对province的onchange响应事件，因为我们已经选择了一个省份了，所以只要让后面的城市和区县知道我选的省份的下标就好。
//构造函数，点击province下拉列表，响应onchange事件，对city进行操作
function cityShow(){
//先清空上一次操作可能留下的数据
delAll("city");
delAll("area");
for(var i=0;i对city的onchange事件。我们只要判断pro[i]和city[j]是否同时被选中，这样就能将i，j的值传给areaArr了，而不用往城市下拉框里去添加数据。
//构造函数，点击city下拉列表，响应onchange事件，对area进行操作
function areaShow(){
//先清空上一次操作可能留下的数据
delAll("area");
for(var i=0;i做到这里其实三级联动的功能已经能实现了，但是
咦?为什么绵阳市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实现三级联动