一个动态的2级菜单解决思路

2014-04-19

一个动态的2级菜单本帖最后由 downice 于 2013-12-23 22:01:15 编辑var d

一个动态的2级菜单
本帖最后由 downice 于 2013-12-23 22:01:15 编辑

<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][2]==codeS){
   objD.options[j] = new Option(arrds2[i][0],arrds2[i][1]);
   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++){
   objD.options[j] = new Option(arrds1[i][0],arrds1[i][1]);
   j++;
  }
  if(j==0)
   objD.options[0] = new Option("没有可选项","0");
}
</script>


<html>
<body>
<select id="ds1id" onclick="getOptions()" onChange="changePort()"></select>
<select id="ds2id"></select>
</body>
</html>

代码无效，高人给看看哪里有问题，此段js摘自网上某个联级select的，根据理解改的。但是无效。求高人指点，不甚感激。
[解决办法]

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

热点排行

JavaScript

一个动态的2级菜单解决思路