参考这个  日尼禾尔  二级联动

写了三级联动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级城市联动</title>
</head>
<body>
<select id="one" onchange="func(this.value)">
<option value="">-请选择省-</option>
<option value="0">浙江省</option>
<option value="1">广东省</option>
<option value="2">福建省</option>
</select>
<select id="two" onchange="funcc()">
<option value="">-请选择市-</option>
</select> <select id="three" >
<option value="">-请选择区-</option>
</select>
</body> <script>
var two = document.getElementById('two'); city = [];//申明   //定义二级数据
city[0] = ['杭州市'];
city[1] = ['广州市','深圳市'];
city[2] = ['厦门市'];
function func(m){
two.length = 1;
   //遍历生产option选项
for (var i = 0; i < city[m].length; i++) {     //创建一个option 把数据存储在option
var op = new Option(city[m][i],i);     //把带有数据的option 添加到第二个select
two.add(op);
};
} dist=[[]];
dist[0]=[[]];
dist[1]=[[]];
dist[2]=[[]];
//定义三级联动
dist[0][0]=['西湖区'];
dist[1][0]=['天河区','番禺区','越秀区'];
dist[1][1]=['南山区','福田区','罗湖区'];
dist[2][0]=['集美区','思明区'];
var three = document.getElementById('three'); function funcc(){
n=document.getElementById("two").selectedIndex;
three.length = 1;
   //遍历生产option选项
m=document.getElementById("one").selectedIndex;
if(m>0) m-=1;
if(n>0)n-=1;
for (var j = 0; j< dist[m][n].length; j++) {     //创建一个option 把数据存储在option
var op = new Option(dist[m][n][j],j);     //把带有数据的option 添加到第二个select
three.add(op);
};
}
</script>
</html>
05-11 13:36