用户名： 密   码：
   飞诺网 加入收藏
飞诺网 网页设计 FrontPage Dreamweaver html Javascript css 网页制作技巧 网页特效 色彩原理 设计理念 web技术文档
Javascript系列教程 Javascript实例 Javascript技术文档

您当前的位置：飞诺网 >>  网页设计 >>  Javascript >> Javascript技术文档

javascript 菜单三级联动

www.diybl.com    时间 ： 2007-10-31  作者：佚名   编辑：本站 点击：   [ 评论 ]



// JavaScript Document

var arrTypes = new Array();
arrTypes[0] = [1,"儿童分类1",0];
arrTypes[1] = [2,"妇科分类2",0];
arrTypes[2] = [3,"内科分类3",0];

arrTypes[3] = [4,"儿科二级分类3",1];
arrTypes[4] = [5,"儿科二级分类4",1];
arrTypes[5] = [6,"妇科二级分类5",2];


arrTypes[6] = [7,"儿科三级分类7",4];
arrTypes[7] = [8,"儿科三级分类8",4];
arrTypes[8] = [9,"儿科三级分类9",5];
arrTypes[9] = [10,"儿科三级分类10",5];
arrTypes[10] = [11,"妇科三级分类11",6];
arrTypes[11] = [12,"内科二级分类12",3];
arrTypes[12] = [13,"独自一类",0];
document.write("<select name=type1 id=type1 onchange='changetype(this.value,2)'></select>");
document.write("<select name=type2 id=type2 onchange='changetype(this.value,3)' style="display:'none';"></select>");
document.write("<select name=type3 id=type3 style="display:'none';"></select>");

select1=document.getElementById("type1");
for(var i=0; i<arrTypes.length; i++)
{
    if(arrTypes[i][2]==0)
    {
        selectcurr = document.getElementById("type1");
        newitem = new Option(arrTypes[i][1],arrTypes[i][0]);
        selectcurr.options.add(newitem);
    }
}
changetype(select1.options[0].value,2);
function changetype(uid,deep)
{
    selectcurr = document.getElementById("type"+deep);
    if(selectcurr)
    {
        var ln = selectcurr.options.length;
        var len = 0;
        while (ln--)
        {
          selectcurr.options[ln] = null;
        }
        
        for(var i=0; i<arrTypes.length; i++)
        {
            if(arrTypes[i][2]==uid)
            {
                newitem = new Option(arrTypes[i][1],arrTypes[i][0]);
                selectcurr.options.add(newitem);
                selectcurr.style.display='';
                len++;
            }
        }
        
        if(len==0)
        {
            selectcurr.style.display='none';
            selectcurr2 = document.getElementById("type3");
            selectcurr2.style.display='none';
        }
        if(deep==2 && len>0)
        {
            changetype(selectcurr.options[0].value,deep+1);
        }
    }
} 

如果图片或页面不能正常显示请点击这里

【文章投稿】【收藏此页】【飞诺社区】【发表评论】【关闭】

上一篇：javascript 常用代码大全

下一篇：JavaScript window.open()方法详细说明

Javascript技术文档推荐文章

文章评论

请您留言
昵称：
验证码：
注册会员 会员登录
也许你对以下文章感兴趣
频道地图

Javascript

FrontPage

Dreamweaver

html

Javascript

css

网页制作技巧

网页特效

色彩原理

设计理念

web技术文档

Javascript技术文档相关文章
Javascript技术文档热门文章