继二级联动后，三级联动肯定是要写出来的，下面是 市 区 县 三级的联动列表
我已经将地区的JS代码传到我的文件中，将其引入到页面后，就可以制作三级联动了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select name="provs0">
</select>
<select name="provs1">
</select>
<select name="provs2">
</select>
<script src="area-json.js"></script>
<script>
var select0 = document.getElementsByName('provs0')[0];
var select1 = document.getElementsByName('provs1')[0];
var select2 = document.getElementsByName('provs2')[0];
var arr0 = [],arr1 = [],arr2 = [];
arr0[0] = document.createElement('option');
arr0[0].innerHTML = '请选择省';
select0.appendChild(arr0[0]);
for(var i = 1; i <= data.length; i ++){
arr0[i] = document.createElement('option');
arr0[i].innerHTML = data[i-1].name
select0.appendChild(arr0[i]);
}
select0.onchange = function(){
select2.innerHTML = '';
select1.innerHTML = '';
arr1[0] = document.createElement('option');
arr1[0].innerHTML = '请选择市';
select1.appendChild(arr1[0]);
if(this.selectedIndex != 0 && this.selectedIndex < data.length - 2){
for(var i = 0; i < data[this.selectedIndex-1].children.length; i ++){
arr1[i] = document.createElement('option');
arr1[i].innerHTML = data[this.selectedIndex-1].children[i].name;
select1.appendChild(arr1[i]);
}
}
}
select1.onchange = function(){
select2.innerHTML = '';
arr2[0] = document.createElement('option');
arr2[0].innerHTML = '请选择区';
select2.appendChild(arr2[0]);
if(this.selectedIndex != 0){
for(var i = 0; i < data[select0.selectedIndex-1].children[this.selectedIndex-1].children.length; i ++){
arr2[i] = document.createElement('option');
arr2[i].innerHTML = data[select0.selectedIndex-1].children[this.selectedIndex-1].children[i].name;
select2.appendChild(arr2[i]);
}
}
}
希望对大家有所帮助~
</script>
</body>
</html>