背景
二级联动菜单是个十分常用的前端组件，在很多网站的菜单栏上都有用到，那么它是如何实现的呢？
今天，我们就基于JS代码来实现这一需求
效果
思路：通过DOM树获取到第一级节点的值，根据该值从提供的数据中获取到对应的二级内容，通过创建节点，将内容放入二级菜单中（注意每次需要先将二级菜单的内容清空）
JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二级联动</title>
</head>
<body>
省会：
<select id="pro" onchange="showCitys();">
<option value="0">江苏</option>
<option value="1">安徽</option>
<option value="2">山东</option>
</select>
城市：
<select id="city"></select>
</body>
<!-- 等待BOM树建成后调用节点 -->
<script type="text/javascript">
var cityArr=[["南京","苏州","无锡"],["合肥",
"芜湖"],["青岛","日照","济南"]];
function showCitys(){
var proEle=document.getElementById("pro");
var proVal=proEle.value;
var citys=cityArr[proVal];
var city=document.getElementById("city");
city.innerHTML="";
for(var i=0;i<citys.length;i++){
var op=document.createElement("option");
op.value=i;
op.innerHTML=citys[i];
city.appendChild(op);
}
}
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
