<!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
>
思路：通过DOM树获取到第一级节点的值，根据该值从提供的数据中获取到对应的二级内容，通过创建节点，将内容放入二级菜单中（注意每次需要先将二级菜单的内容清空）
