简单的纯js三级联动
程序员文章站
2022-07-01 23:47:25
参考这个 日尼禾尔 二级联动 写了三级联动 ......
参考这个 二级联动
写了三级联动
<!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>