联级下来菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function()
        {
          var s1=new Sel("div1");
            s1.add("0",["1","2","3"]);//第一级


            s1.add("0_0",["1_1","1_2","1_3"]); //第二集


              s1.add("0_0_0",["1_1_1","1_1_2","1_1_3"]);//第三集
              s1.add("0_0_1",["1_2_1","1_2_2","1_2_3"]);//第三集
              s1.add("0_0_2",["1_3_1","1_3_2","1_3_3"]);//第三集


            s1.add('0_1',['2_1','2_2','2_3']);//第二集
               s1.add("0_1_0",["2_1_1","2_1_2","2_1_3"]);//第三集
               s1.add("0_1_1",["2_2_1","2_2_2","2_2_3"]);//第三集
               s1.add("0_1_2",["2_3_1","2_3_2","2_3_3"]);//第三集


            s1.add('0_2',['3_1','3_2','3_3']);//第二集
               s1.add("0_2_0",["3_1_1","3_1_2","3_1_3"]);//第三集
               s1.add("0_2_1",["3_2_1","3_2_2","3_2_3"]);//第三集
               s1.add("0_2_2",["3_3_1","3_3_2","3_3_3"]);//第三集


            s1.init(3);
        };
        function Sel(id)
        {
           this.oParent=document.getElementById(id);
            this.data={};
            this.aSel=this.oParent.getElementsByTagName("select");//全局
        }
        Sel.prototype={
            init:function(num)
            {
                var _this=this;
                for(var i=1;i<=num;i++)
                {
                    var oSel=document.createElement('select');
                    var oPt=document.createElement('option');
                    oPt.innerText="默认";
                    oSel.appendChild(oPt);
                    oSel.index=i;//添加索引
                    this.oParent.appendChild(oSel);
                    oSel.onchange=function()//select改变的时候传递他的索引
                    {
                       _this.change(this.index)
                    }
                }
                this.first();
            },
            add:function(key,value)
            {
                this.data[key]=value;
            },
            first:function()
            {
                var arr=this.data['0'];
                for(var i=0;i<arr.length;i++)
                {
                    var oPt=document.createElement('option');
                    oPt.innerHTML=arr[i];
                    this.aSel[0].appendChild(oPt);
                }
            },
            change:function(iNow)
            {
               var str="0";
                for(var i=0;i<iNow;i++)
                {
                    str+="_"+(this.aSel[i].selectedIndex-1);
                }
                if(this.data[str])
                {
                     var arr=this.data[str];
                    this.aSel[iNow].options.length=1;//清除
                    for(var i=0;i<arr.length;i++)
                    {
                       var oPt=document.createElement("option");
                        oPt.innerHTML=arr[i];
                        this.aSel[iNow].appendChild(oPt)
                    }
                    this.aSel[iNow].options[1].selected=true;
                    iNow++;
                    if(iNow<this.aSel.length)//最好一个选择默认的时候
                    {
                        this.change(iNow);//递归
                    }
                }
                else//选择默认的时候
                {
                    if(iNow<this.aSel.length)//最好一个选择默认的时候
                    {
                        this.aSel[iNow].options.length=1;
                    }


                }
            }
        };
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
阅读更多
版权声明:为了避免百度一下通片同一篇文章,未经博主允许不得转载。本博客作为笔记使用,正确性请自行验证。 https://blog.csdn.net/u014071104/article/details/44574747
个人分类: 特效集合
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭