级联菜单显示省份

级联菜单的实现

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

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

 

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

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

 

下面就是相应的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>