javascript 三级下拉选择菜单Levels对象

　　<script type="text/javascript">

　　var level1 = ["Beijing", "GuangZhou", "ShangHai"];

　　var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", "Panyu"], ["PuDong", "PuXi"]];

　　var level3 = [[["TianShan", "HuangShan"], ["TianTan1", "TianTan2"], ["GuGong1", "GuGong2", "GuGong3", "GuGong4"]], [["TianHe1", "TianHe2"], ["PanYu1", "PanYu2"]], [["PuDong1", "PuDong2"], ["PuXi1", "PuXi2"]]];

　　var Levels = {

　　fL: null,//用存储各级select的DOM引用

　　sL: null,

　　tL: null,

　　l1: null,

　　l2: null,

　　l3: null,

　　$: function(id){

　　return (typeof id == "object") ? id : document.getElementById(id);

　　},

　　init: function(fID, sID, tID, l1, l2, l3){

　　this.fL = this.$(fID);

　　this.sL = this.$(sID);

　　this.tL = this.$(tID);

　　this.l1 = l1;

　　this.l2 = l2;

　　this.l3 = l3;

　　this.fL.options.add(new Option("Select",-1));//给一级菜单添加一个“select”标志

　　for (var i = 0; i < l1.length; i++) {

　　var item = new Option(l1[i], i);

　　this.fL.options.add(item);

　　}

　　this.doLev2(); //调用doLev2函数，处理二级菜单

　　this.doLev3(); //调用doLev3函数，处理三级菜单

　　},

　　removeSTL: function(){ //用于删除第二、三级的菜单项

　　this.sL.options.length = 0;

　　this.tL.options.length = 0;

　　},

　　removeTL: function(){ //用于删除第三级的菜单项

　　this.tL.options.length = 0;

　　},

　　doLev2: function(){ //处理二级菜单

　　var that = this;

　　this.fL.onchange = function(){

　　that.removeSTL(); //删除旧second的select

　　if (that.fL.selectedIndex == 0) {

　　that.removeSTL(); // //删除旧second的select

　　}

　　else {

　　that.sL.options.add(new Option("Select", -1)); //给二级菜单添加一个“select”标志

　　//获取第二级所需的数组

　　var items = that.l2[that.fL.selectedIndex - 1];

　　for (var i = 0; i < items.length; i++) { //添加第二级的新select项

　　var item = new Option(items[i], i);

　　that.sL.options.add(item);

　　}

　　}

　　}

　　},

　　doLev3: function(){ //处理三级菜单

　　var that = this;

　　this.sL.onchange = function(){

　　that.removeTL(); //删除旧third的select

　　if (that.sL.selectedIndex == 0) {

　　that.removeTL(); //删除旧third的select

　　}

　　else {

　　that.tL.options.add(new Option("Select", -1)); //给三级菜单添加一个“select”标志

　　//获取第三级所需的数组

　　var items = that.l3[that.fL.selectedIndex - 1][that.sL.selectedIndex - 1];

　　for (var i = 0; i < items.length; i++) { //添加第三级的新select项

　　var item = new Option(items[i], i);

　　that.tL.options.add(item);

　　}

　　}

　　}

　　}

　　}

　　onload = function(){

　　Levels.init("first", "second", "third", level1,level2,level3); //调用Levels的init方法

　　}

　　</script>

　　<form>

　　<select id="first">

　　</select>

　　<select id="second">

　　</select>

　　<select id="third">

　　</select>

　　</form>