多级级联菜单js实现

在实际应用中，经常将事物进行分类，分类可以是二级的或者多级的。在设计页面时，可以使用多个下拉菜单分别显示不同级别的分类信息，即实现多级级联菜单。以下实例，当选择商品的“第一级分类”下拉菜单时，商品的“第二级分类”下拉菜单的内容会随即发生变化。

实现多级级联菜单的关键代码如下：

<script type="text/javascript">
var arr2 = new Array(4);
arr2["数码设备"] = new Array("数码相机","打印机");
arr2["家用电器"] = new Array("电视机","电冰箱");
arr2["礼品工艺"] = new Array("鲜花","彩带");
function removeinfo(classMenu){//将下拉框各选项清空
  for (var i=0; i < classMenu.options.length; i++){
    classMenu.options[i]=null;
  }
}
function changeMenu(classList,classMenu){
  removeinfo(classMenu)
  for (var i=0; i < classList.length; i++){
      classMenu[i]=new Option(classList[i],classList[i]);
  }
}
</script>

<select name="类别" id="类别" onChange="changeMenu(arr2[document.form1.类别.options[document.form1.类别.selectedIndex].text],document.form1.分类);">
     <option selected>数码设备</option>
     <option>家用电器</option>
     <option>礼品工艺</option>
             
</select>
<select name="分类" id="分类">
     <option>数码相机</option>
     <option>打印机</option>
</select>

本实例首先在js中定义两个数组分别用于记录商品一级分类和二级分类的信息，然后自定义一个javascript函数，该函数的功能是当触发商品“第一级分类”下拉菜单中的onChange事件时，先清空商品的“第二级分类”下拉菜单中的选项内容，然后再将对应信息装载到商品的“第二级分类”下拉菜单中。

转载于:https://www.cnblogs.com/rabbit2012/archive/2012/12/03/2800369.html