当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript 三级下拉选择菜单Levels对象

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

2019年07月30日  | 移动技术网IT编程  | 我要评论
javascript：
复制代码 代码如下:

<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>

html：
复制代码 代码如下:

<form>
<select id="first">
</select>
<select id="second">
</select>
<select id="third">
</select>
</form>

演示代码：

[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网