<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的js联动菜单示例 - 我爱模板网 5.jimth.com</title>
<script>
//定义两组数据
var city =["北京","上海","合肥","吉林"];
var area = [
["东城","西城","海淀","朝阳","丰台","门头沟","石景山","房山","通州","顺义","昌平","大兴","怀柔","平谷","延庆","密云"],
["黄浦","徐汇","长宁","静安","普陀","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","奉贤","崇明"],
["瑶海区","庐阳区","蜀山区","包河区","长丰县","肥东县","肥西县","庐江县","巢湖市","合肥高新技术产业开发区","合肥经济技术开发区","合肥新站综合试验区","巢湖经济开发区"],
["朝阳区","南关区","二道区","宽城区","绿园区","双阳区","榆树市","九台市","德惠市","农安县"]
]
window.onload=function(){
loadCity(); //为第一个select填充内容
document.getElementById("city").onchange = loadArea;
};
//读取城市数据，并且填充到select中
function loadCity(){
var oCity= document.getElementById("city");
for(var i in city){
var op =new Option(city[i],city[i]);
oCity.options.add(op)
};
};
//通过获取被选中的城市的option的索引值，找到对应的区域的索引值，并且遍历出来放到区域的select中
function loadArea(){
var index = document.getElementById("city").selectedIndex;
var oArea = document.getElementById("area");
oArea.options.length=0;
for(var i in area[index]){
var op= new Option(area[index][i],area[index][i])
oArea.options.add(op)
}
}
</script>
</head>
<body>
城市：<select id="city"></select> 区域：<select id="area"></select>
</body>
</html>
简单的js联动菜单示例
联动菜单，即点击上一级菜单，通过ajax方法，加载这个菜单的对应列表，显示到下一级菜单上。这个联动菜单一般都是需要和后台交换数据，并且一般会用到ajax异步刷新技术，如果数据比较大，存储在数据库或其他文件的话。本例比较简单，就是定义两个数组，第一个数组中的每个内容对应第二个二维数组中的子数组。明白本例的原理，也可以使用在数据比较少，可以直接放在js文件中的案例。代码如下：