select下拉菜单二级联动
二级联动效果大家可能都比较熟悉，比如省市二级联动效果。
从它的使用频度就可以看出它的重要性，下面就通过代码实例详细介绍一下它的实现过程。
代码实例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=function(){
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = [['朝阳','海淀'],['杭州','海宁']];
function choose(){
var opt = "";
if(province.value==undefined){
province.value=0;
}
var len = area[province.value];
for(var index = 0;index < len.length; index++){
opt = opt + '<option value ="'+ index +'"> '+ len[index]+ '</option>'
}
city.innerHTML = opt;
}
province.onchange = function(){
choose();
}
choose();
}
</script>
</head>
<body>
<select id="province">
<option value="0">北京</option>
<option value="1">浙江</option>
</select>
<select id="city">
</select>
</body>
</html>
上面的代码实现了联动效果，只是做了精简而已，下面就介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var province = document.getElementById("province")，获取省份select下拉菜单。
（3）.var city = document.getElementById("city")，获取城市select下拉菜单。
（4）.var area = [['朝阳','海淀'],['杭州','海宁']]，一个模拟的二维数组，存放的是城市或者区。
（5）.function choose(){}，作为onchange事件处理函数。
（6）.var opt = ""，此变量用来存储option项相关字符串。
（7）.if(province.value==undefined){
province.value=0;
}，如果属性值等于undefined，也就是在默认状态会显示第一个子数组中城市或者区。
（8）.var len = area[province.value]，显示指定的子数组，城市select下拉菜单的value值是和数组中子数组城市索引关联。
（9）.for(var index = 0;index < len.length; index++){
opt = opt + '<option value ="'+ index +'"> '+ len[index]+ '</option>'
}，遍历子数组中的每一个城市或者区，连接成option字符串。
（10）.city.innerHTML = opt，设置option项。
（11）.province.onchange = function(){
choose();
}，注册onchange事件处理函数。
（12）.choose()，为了显示默认省份和城市或者区。
二.相关阅读：
（1）.二维数组参阅 JavaScript 二维数组 一章节。
（2）.onchange 事件参阅 JavaScript change 事件 一章节。
（3）.innerHTML 属性参阅 JavaScript innerHTML 一章节。