您的位置：首页 > Web前端 > JavaScript

javascript实现二级菜单联动源码---人人看的懂！

2015-12-03 14:54 701 查看

这里实现的是一个直辖市的地图二级联动列表：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>两级联动</title>
</head>
<body>
<h3>直辖市</h3>
<!--市的下拉列表-->
<select id="select1" onchange="change()"></select>
<!--区的下拉列表-->
<select id="select2"></select>

<!--javascript部分-->
<script>
//市级数组
var shi=document.getElementById("select1");
var all_shi=["北京市","上海市","天津市","重庆市"];
//将所有的直辖市在第一个列表中显示
var flag="";
for(var i=0;i<all_shi.length;i++){
flag=flag+"<option value='"+i+"'>"+all_shi[i]+"</option>";
shi.innerHTML=flag;
}
//各区的数组（各区的数组的下标对应的是该市的数组的下标）
var qu=document.getElementById("select2");
var all_qu=[
["东城区","西城区","朝阳区","海淀区","石景山区","丰台区","宣武区","崇文区","顺义区","怀柔区","密云县","延庆县","昌平区","平谷区","门头沟区","房山区","通州区"],
["普陀区","静安区","杨浦区","黄浦区","南汇区","嘉定区","徐汇区","奉贤区","闸北区","卢湾区","长宁区","闵行区","青浦区","金山区","宝山区","虹口区","浦东新区","崇明岛"],
["和平区","河西区","河东区","红桥区","南开区","河北区","西青区","津南区","北辰区","东丽区","汉沽","宝坻","静海","宁河","武清"],
["万州区","黔江区","涪陵区","渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","渝北区","巴南区","长寿区","江津区","合川区","永川区","南川区","綦江区","大足区","铜梁区","璧山区"]
];
//将默认的北京市的所有区在第二个列表中显示
flag="";
for(var n=0;n<all_qu[0].length;n++){
flag=flag+"<option>"+all_qu[0]
+"</option>";
qu.innerHTML=flag;
}

//市级部分的回调函数
function change(){
//获取第一个列表对象
flag="";
for(var j=0;j<all_qu[shi.value].length;j++){
flag=flag+"<option>"+all_qu[shi.value][j]+"</option>";
qu.innerHTML=flag;
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航