一个动态的2级菜单

本帖最后由 downice 于 2013-12-23 22:01:15 编辑

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <select id="ds1id" onclick="getOptions()" onChange="changePort()"></select>
    <select id="ds2id"></select>
    <script type="text/javascript">
                var ds1 = "灯类型,1;电视,2;窗帘,3;热水器,4;安防,5;门控,6;空调,7;排风扇,8;排水,9;燃气阀,10;水阀,11;家庭影院,12;冰箱,13;地暖,14;人体健康,15;";            
                var ds2 = "吊顶顶灯,1,01;墙壁灯,2,01;地灯,3,01;书架灯,4,01;床头灯,5,01;窗纱,6,03;窗帘,7,03;窗户,8,03;";
                var arrds1 = new Array();
                var arrTemp = ds1.split(";");
                var i;
                var objS = document.getElementById("ds1id");
                var objD = document.getElementById("ds2id");
                for(i=0;i<arrTemp.length;i++){
                     arrds1[i] = arrTemp[i].split(",");
                }
                var arrds2 = new Array();
                arrTemp = ds2.split(";");
                for(i=0;i<arrTemp.length;i++){
                     arrds2[i] = arrTemp[i].split(",");
                }
                function changePort(){
                    removeOptions(objD);
                     var index = objS.selectedIndex;
                     var codeS = objS.options[index].value;
                     var j = 0;
                     for(i=0;i<arrds2.length;i++){
                      if(arrds2[i][1]==codeS){
                           objD.options[j] = new Option(arrds2[i][0],arrds2[i][2]);
                           j++;
                      }
                      if(j==0)
                           objD.options[0] = new Option("没有可选项","0");
                     }
            }
            function removeOptions(obj){
                 for(i=0;i<obj.options.length;i++)
                      obj.options[i] = null;
            }
            function getOptions(){
                var j = 0;
                for(i=0;i<arrds1.length;i++){
                       objS.options[j] = new Option(arrds1[i][0],arrds1[i][1]);
                       j++;
                  }
                  if(j==0)
                       objD.options[0] = new Option("没有可选项","0");
            }
    </script></body>
    </html>
      

  2.   

    可以，先在1上点点。<select id="ds1id" onclick="getOptions()" onChange="changePort()"></select>
    1就出来了。