javascript实现级联菜单

下面是一个级联菜单的实现案例：

选择广东省之后，在第二个下拉菜单就会显示相应的城市名称：



当你选择了某个城市之后，如果在这个市里还其他的地区就会再次出现一个下拉菜单：



第三个下拉菜单就是对应的区域：



下面就是相应的js代码：

<script type="text/javascript" src="sitedata_bas.js" charset="GBK"></script>
//上一行的代码是引用外部的js文件，该文件中是存储相应的省份、城市、地区的名称数组
由于这个js文件中的数据比较大，在这里就列出部分：

var arrCity =
[
{ name:"请选择", sub:[{name:"请选择"}], type:1},
{
name:"北京",
sub:[{name:"请选择"},{name:"东城区"},{name:"西城区"},{name:"崇文区"},{name:"宣武区"},{name:"朝阳区"},{name:"海淀区"},{name:"丰台区"},{name:"石景山区"},{name:"房山区"},{name:"通州区"},{name:"顺义区"},{name:"昌平区"},{name:"大兴区"},{name:"怀柔区"},{name:"平谷区"},{name:"门头沟区"},{name:"密云县"},{name:"延庆县"},{name:"其他"}],
type:0
},
{
name:"广东",
sub:[{name:"请选择",sub:[]},]
你可以仿照上面的添加内容就可以了

//下面就是实现级联菜单的主要逻辑：

<script>
var Utils = {};
Utils.addEvent = function(el, type, func) {
if (document.addEventListener) {
el.addEventListener(type, func, false);
} else if (document.attachEvent) {
el.attachEvent('on' + type, func);
}
};
Utils.addEvent(window, 'load', function() {
var region1 = document.getElementById("region1");//这是对应的下来菜单的id（只需修改这里就可以用了）
var region2 = document.getElementById("region2");//这是对应的下来菜单的id
var region3 = document.getElementById("region3");//这是对应的下来菜单的id
for ( var i = 0; i < arrCity.length; i++) {
region1.options[i] = new Option(arrCity[i].name, arrCity[i].name);
}
region2.options[0] = new Option("请选择", "请选择");
region3.style.display = "none";
Utils.addEvent(region1, 'change', function() {
var region1_obj = arrCity[region1.selectedIndex];
var region2_arr = region1_obj.sub;
region2.options.length = 0;
region3.options.length = 0;
region3.style.display = "none";
for ( var i = 0; i < region2_arr.length; i++) {
region2.options[i] = new Option(region2_arr[i].name, region2_arr[i].name);
}
});
Utils.addEvent(region2, 'change', function() {
var region1_obj = arrCity[region1.selectedIndex];
var region2_obj = region1_obj.sub[region2.selectedIndex];
var region3_arr = region2_obj.sub;
if (region2_obj.type == 0) {
region3.options.length = 0;
region3.style.display = "inline";
for ( var i = 0; i < region3_arr.length; i++) {
region3.options[i] = new Option(region3_arr[i].name, region3_arr[i].name);
}
} else {
region3.style.display = "none";
}
});
});

</script>

在页面中你需要写的除了上面的js代码外，还要写出三个下拉菜单：

省份：<select id="region1" name="region1"></select>
城市：<select id="region2" name="region2"></select>
区域：<select id="region3" name="region3"></select>