二级联动菜单出不来了


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
     <!--     
     //这里的max主要是限制一下最多可以加几个，如果不想限制可以不用
        function addFile(max)
        {
            var Text1 = document.getElementsByName("Text1");
            if (Text1.length == 1 && Text1[0].disabled == true)
           {
               Text1[0].disabled = false;
               return;
           }
           if (Text1.length < max)
           {
               var fileButton = '<br />姓名：<input id="Text1" name="Text1" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;性别：<input id="Text2" name="Text2" type="text" /> <select name="s1" onChange="redirec(document.form1.s1.options.selectedIndex)"> <option selected>请选择</option> <option value="1">脚本语言</option> <option value="2">高级语言</option> <option value="3">其他语言</option> </select> <select name="s2"> <option value="请选择" selected>请选择</option> </select>';  
               //alert(fileButton);
               document.getElementById("FileList").insertAdjacentHTML("beforeEnd",fileButton);
           }
       }
       //这里的方法是采用了隐藏域的方法，把得到的信息放到隐藏域里，这里分了二个，一个是用来存input的一个是用来存select的
       function getNames() {
           var hdArea = document.getElementById("<%=hdNames.ClientID %>");
           var hdArea2 = document.getElementById("<%=SelectName.ClientID %>");
           var controlArea = document.getElementById("FileList");
           var list = controlArea.getElementsByTagName("input");
           var nameStr = "";
           for (var i = 0; i < list.length; i++) {
               nameStr += list[i].value;
               nameStr += "|";
           }
           var list2 = controlArea.getElementsByTagName("select");
           var nameStr2 = "";
           for (var i = 0; i < list2.length; i++) {
               nameStr2 += list2[i].value;
               nameStr2 += "|";
           }
           hdArea.value = nameStr.substr(0, nameStr.length - 1);
           hdArea2.value = nameStr2.substr(0, nameStr2.length - 1);
       }
     
// -->  </script></head>
<body>
<form id="form1" runat="server">
  <p id="FileList"> 姓名：
    <input id="Text1" name="Text1" type="text" />
    &nbsp;&nbsp;&nbsp;&nbsp;性别：
    <input id="Text2" name="Text2" type="text" />
    <select name="s1" onChange="redirec(document.form1.s1.options.selectedIndex)"> <option selected>请选择</option> <option value="1">脚本语言</option> <option value="2">高级语言</option> <option value="3">其他语言</option> </select> <select name="s2"> <option value="请选择" selected>请选择</option> </select>
  </p>
  <input id="Button2" type="button" value="添加" onclick="addFile(30)" />
  <asp:HiddenField 
          ID="SelectName" runat="server" />
  &nbsp;
  <asp:HiddenField ID="hdNames" runat="server" />
  <br>
  <br>
  <asp:Button ID="Button1" runat="server" Text="Button" 
          onclick="Button1_Click" OnClientClick="getNames()" />
</form>
<script language="javascript">
 //获取一级菜单长度
 var select1_len = document.form1.s1.options.length;
 var select2 = new Array(select1_len);
 //把一级菜单都设为数组
 for (i=0; i<select1_len; i++)
 { select2[i] = new Array();}
 //定义基本选项
 select2[0][0] = new Option("请选择", " "); select2[1][0] = new Option("PHP", " ");
 select2[1][1] = new Option("ASP", " ");
 select2[1][2] = new Option("JSP", " "); select2[2][0] = new Option("C/C++", " ");
 select2[2][1] = new Option("Java", " ");
 select2[2][2] = new Option("C#", " "); select2[3][0] = new Option("Perl", " ");
 select2[3][1] = new Option("Ruby", " ");
 select2[3][2] = new Option("Python", " ");
 //联动函数
 function redirec(x)
 {
 var temp = document.form1.s2;
 for (i=0;i<select2[x].length;i++)
 { temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
 temp.options[0].selected=true;
 }
 </script>
</body>
</html>

解决方案 »

  1.   

    获得form的方法有问题，
    document.form1改为document.forms[form的序号]或是document.forms['form的name']
      

  2.   

     var select1_len = document.form1.s1.length;
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
         <!--     
         //这里的max主要是限制一下最多可以加几个，如果不想限制可以不用
            function addFile(max)
            {
                var Text1 = document.getElementsByName("Text1");
                if (Text1.length == 1 && Text1[0].disabled == true)
               {
                   Text1[0].disabled = false;
                   return;
               }
               if (Text1.length < max)
               {
                   var fileButton = '<br />姓名：<input id="Text1" name="Text1" type="text" />    性别：<input id="Text2" name="Text2" type="text" /> <select name="s1" onChange="redirec(document.form1.s1.options.selectedIndex)"> <option selected>请选择</option> <option value="1">脚本语言</option> <option value="2">高级语言</option> <option value="3">其他语言</option> </select> <select name="s2"> <option value="请选择" selected>请选择</option> </select>';  
                   //alert(fileButton);
                   document.getElementById("FileList").insertAdjacentHTML("beforeEnd",fileButton);
               }
           }
           //这里的方法是采用了隐藏域的方法，把得到的信息放到隐藏域里，这里分了二个，一个是用来存input的一个是用来存select的
           function getNames() {
               var hdArea = document.getElementById("<%=hdNames.ClientID %>");
               var hdArea2 = document.getElementById("<%=SelectName.ClientID %>");
               var controlArea = document.getElementById("FileList");
               var list = controlArea.getElementsByTagName("input");
               var nameStr = "";
               for (var i = 0; i < list.length; i++) {
                   nameStr += list[i].value;
                   nameStr += "|";
               }
               var list2 = controlArea.getElementsByTagName("select");
               var nameStr2 = "";
               for (var i = 0; i < list2.length; i++) {
                   nameStr2 += list2[i].value;
                   nameStr2 += "|";
               }
               hdArea.value = nameStr.substr(0, nameStr.length - 1);
               hdArea2.value = nameStr2.substr(0, nameStr2.length - 1);
           }
         
    // -->  </script></head>
    <body>
    <form id="form1" runat="server">
      <p id="FileList"> 姓名：
        <input id="Text1" name="Text1" type="text" />
            性别：
        <input id="Text2" name="Text2" type="text" />
        <select name="s1" onChange="redirec(document.forms[0].s1.options.selectedIndex)"> <option selected>请选择</option> <option value="1">脚本语言</option> <option value="2">高级语言</option> <option value="3">其他语言</option> </select> <select name="s2"> <option value="请选择" selected>请选择</option> </select>
      </p>
      <input id="Button2" type="button" value="添加" onclick="addFile(30)" />
      <asp:HiddenField 
              ID="SelectName" runat="server" />
       
      <asp:HiddenField ID="hdNames" runat="server" />
      <br>
      <br>
      <asp:Button ID="Button1" runat="server" Text="Button" 
              onclick="Button1_Click" OnClientClick="getNames()" />
    </form>
    <script language="javascript">
     //获取一级菜单长度
     var select1_len = document.forms[0].s1.options.length;
     var select2 = new Array(select1_len);
     //把一级菜单都设为数组
     for (i=0; i<select1_len; i++)
     { select2[i] = new Array();}
     //定义基本选项
     select2[0][0] = new Option("请选择", " "); select2[1][0] = new Option("PHP", " ");
     select2[1][1] = new Option("ASP", " ");
     select2[1][2] = new Option("JSP", " "); select2[2][0] = new Option("C/C++", " ");
     select2[2][1] = new Option("Java", " ");
     select2[2][2] = new Option("C#", " "); select2[3][0] = new Option("Perl", " ");
     select2[3][1] = new Option("Ruby", " ");
     select2[3][2] = new Option("Python", " ");
     //联动函数
     function redirec(x)
     {
     var temp = document.forms[0].s2;
     for (i=0;i<select2[x].length;i++)
     { temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
     temp.options[0].selected=true;
     }
     </script>
    </body>
    </html>
      

  4.   

    红色表示改过的地方。
    ==========================================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
         <!--     
         //这里的max主要是限制一下最多可以加几个，如果不想限制可以不用
            function addFile(max)        {
                var Text1 = document.getElementsByName("Text1");
                if (Text1.length == 1 && Text1[0].disabled == true)
               {
                   Text1[0].disabled = false;
                   return;
               }
               if (Text1.length < max)
               {
                   var fileButton = '<br />姓名：<input id="Text1" name="Text1" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;性别：<input id="Text2" name="Text2" type="text" /> <select name="s1" onChange="redirec(document.form1.s1.options.selectedIndex)"> <option selected>请选择</option> <option value="1">脚本语言</option> <option value="2">高级语言</option> <option value="3">其他语言</option> </select> <select name="s2"> <option value="请选择" selected>请选择</option> </select>';             
                   //alert(fileButton);
                   document.getElementById("FileList").insertAdjacentHTML("beforeEnd",fileButton);
               }
           }
           //这里的方法是采用了隐藏域的方法，把得到的信息放到隐藏域里，这里分了二个，一个是用来存input的一个是用来存select的
           function getNames() {
               var hdArea = document.getElementById("<%=hdNames.ClientID %>");
               var hdArea2 = document.getElementById("<%=SelectName.ClientID %>");
               var controlArea = document.getElementById("FileList");
               var list = controlArea.getElementsByTagName("input");
               var nameStr = "";
               for (var i = 0; i < list.length; i++) {
                   nameStr += list[i].value;
                   nameStr += "|";
               }
               var list2 = controlArea.getElementsByTagName("select");
               var nameStr2 = "";
               for (var i = 0; i < list2.length; i++) {
                   nameStr2 += list2[i].value;
                   nameStr2 += "|";
               }
               hdArea.value = nameStr.substr(0, nameStr.length - 1);
               hdArea2.value = nameStr2.substr(0, nameStr2.length - 1);
           }
          
    // -->  </script>
     
    </head>
    <body>
    <form id="form1" runat="server">
      <p id="FileList"> 姓名：
        <input id="Text1" name="Text1" type="text" />
        &nbsp;&nbsp;&nbsp;&nbsp;性别：
        <input id="Text2" name="Text2" type="text" />
        <select id="s1" name="s1" onChange="redirec(this.options.selectedIndex)"> <option selected>请选择</option> <option value="1">脚本语言</option> <option value="2">高级语言</option> <option value="3">其他语言</option> </select> <select name="s2" id="s2"> <option value="请选择" selected>请选择</option> </select>
      </p>
      <input id="Button2" type="button" value="添加" onclick="addFile(30)" />
      <asp:HiddenField 
              ID="SelectName" runat="server" />
      &nbsp;
      <asp:HiddenField ID="hdNames" runat="server" />
      <br>
      <br>
      <asp:Button ID="Button1" runat="server" Text="Button" 
              onclick="Button1_Click" OnClientClick="getNames()" />
    </form>
    <script language="javascript">
     //获取一级菜单长度
     var select1_len = document.getElementById('s1').options.length;
     var select2 = new Array(select1_len);
     //把一级菜单都设为数组
     for (i=0; i<select1_len; i++)
     { select2[i] = new Array();}
     //定义基本选项
     select2[0][0] = new Option("请选择", " ");
     
     select2[1][0] = new Option("PHP", " ");
     select2[1][1] = new Option("ASP", " ");
     select2[1][2] = new Option("JSP", " ");
     
     select2[2][0] = new Option("C/C++", " ");
     select2[2][1] = new Option("Java", " ");
     select2[2][2] = new Option("C#", " ");
     
     select2[3][0] = new Option("Perl", " ");
     select2[3][1] = new Option("Ruby", " ");
     select2[3][2] = new Option("Python", " ");
     //联动函数
     function redirec(x)
     {
     var temp = document.getElementById('s2');
     for (i=0;i<select2[x].length;i++)
     { temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
     temp.options[0].selected=true;
     }
     </script>
    </body>
    </html>