JS实现三级联动

最新推荐文章于 2023-03-20 09:21:20 发布

Cyl小丑

最新推荐文章于 2023-03-20 09:21:20 发布

阅读量185

点赞数

分类专栏： JS实现三级联动文章标签： JS实现三级联动

本文链接：https://blog.csdn.net/qq_39376653/article/details/80920915

版权

JS实现三级联动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>三级联动</title>
<script type="text/javascript">
//定义数组
//一维
var arr1=["广西","广东","云南"];
//二维
var arr2=
[
["北海","贺州","防城港"],
["深圳","广州","佛山"],
["西双版纳","丽江","天堂"]
];
//三维
var arr3=
[
[
["北海一","北海二","北海三"],
["贺州一","贺州二","贺州三"],
["防城港一","防城港二","防城港三"]
],
[
["深圳一","深圳二","深圳三"],
["北海一","北海二","北海三"],
["北海一","北海二","北海三"]
],
[
["北海一","北海二","北海三"],
["北海一","北海二","北海三"],
["北海一","北海二","北海三"]
]
];
window.οnlοad=function(){
var capital=document.getElementById("capital");
for(var i=0;i<arr1.length;i++){

capital.add(new Option(arr1[i],arr1[i]),null);
}
}
function capChange(){
var capitalval=document.getElementById("capital").value;
var city =document.getElementById("city");
city.options.length=0;
for(var i=0;i<arr1.length;i++){
if(arr1[i]==capitalval){
for(var j=0;j<arr2[i].length;j++){
city.add(new Option(arr2[i][j],arr2[i][j]),null);
}
}
}
}
function citChange(){
var cityval = document.getElementById("city").value;
var countryside =document.getElementById("countryside");
countryside.options.length=0;
for(var i =0;i<arr2.length;i++){
for(var j=0;j<arr2[i].length;j++){
if(arr2[i][j]==cityval){
for(var k=0;k<arr3.length;k++){
countryside.add(new Option(arr3[i][j][k],arr3[i][j][k]),null);
}
}
}
}
}
</script>
</head>
<body>
<h3>地理下拉列表</h3>
<p>
<select id="capital" style="width: 120px;" οnchange="capChange()">
<option>--请选择省--</option>
</select>
<select id="city" style="width: 120px;" οnchange="citChange()">
<option>--请选择市--</option>
</select>
<select id="countryside" style="width: 120px;" >
<option>--请选择乡--</option>
</select>
</p>
</body>
</html>

Cyl小丑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS实现三级联动

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;me
复制链接

扫一扫