<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Dsy()
{
 this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
 this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
 if(typeof(this.Items[id]) == "undefined") return false;
 return true;
}function change(v){
 var str="0";
 for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));};
 var ss=document.getElementById(s[v]);
 with(ss){
  length = 0;
  options[0]=new Option(opt0[v],opt0[v]);
  if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
  {
   if(dsy.Exists(str)){
    ar = dsy.Items[str];
    for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
    if(v)options[1].selected = true;
   }
  }
  if(++v<s.length){change(v);}
 }
}var dsy = new Dsy();dsy.add("0",["1","2","3"]);dsy.add("0_0",["11"]);
dsy.add("0_0_0",["111"]);dsy.add("0_1",["21","22"]);
dsy.add("0_1_0",["211"]);
dsy.add("0_1_1",["221","222"]);dsy.add("0_2",["31","32","33"]);
dsy.add("0_2_0",["311"]);
dsy.add("0_2_1",["321","322"]);
dsy.add("0_2_2",["331","332","333"]);
//-->
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript>
<!--
//** 秋水
var s=["s1","s2","s3"];
var opt0 = ["请","选","择"];
function setup()
{
 for(i=0;i<s.length-1;i++)
  document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
 change(0);
}
//-->function addRow() 
{  
    var root = document.getElementById("tbody"); 
    var allRows = root.getElementsByTagName('tr'); 
    var cRow = allRows[0].cloneNode(true) 
    root.appendChild(cRow); 
     
}  
function removeRow(r) 

    var root = r.parentNode; 
    var allRows = root.getElementsByTagName('tr') 
    if(allRows.length>  1) 
        {root.removeChild(r);} 
    else 
        alert("only one row left, you can not remove it!"); 
}</SCRIPT>
</head>
<body  onload="setup()">
多级关联菜单:
<form name="frm">
  <table>
<tbody id="tbody"> 
<tr>     
        <td>
<select id="s1"><option>请</option></select>
<select id="s2"><option>选</option></select>
<select id="s3"><option>择</option></select>
<input type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)">  
</td></tr>
 </tbody>
<tr>
<td><input name="button" type="button" value="Add row" onclick="addRow()">  <input type="submit" name="Submit" value="search">    </td> 
</tr> 
    </table> 
</form>
</body>
</html>

解决方案 »

  1.   

    你好,
      首先谢谢你的热心帮忙,这个问题已经困扰我好几天了,我都快崩溃了!但是运行你的程序时还有一个问题,就是我通过添加行按钮添加一行后,后面的列表框不跟着前面的变化,请帮忙看看,非常感谢!<html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function Dsy()
    {
     this.Items = {};
    }
    Dsy.prototype.add = function(id,iArray)
    {
     this.Items[id] = iArray;
    }
    Dsy.prototype.Exists = function(id)
    {
     if(typeof(this.Items[id]) == "undefined") return false;
     return true;
    }function change(v){
     var str="0";
     for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));};
     var ss=document.getElementById(s[v]);
     with(ss){
      length = 0;
      options[0]=new Option(opt0[v],opt0[v]);
      if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
      {
       if(dsy.Exists(str)){
        ar = dsy.Items[str];
        for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
        if(v)options[1].selected = true;
       }
      }
      if(++v<s.length){change(v);}
     }
    }var dsy = new Dsy();dsy.add("0",["1","2","3"]);dsy.add("0_0",["11"]);
    dsy.add("0_0_0",["111"]);dsy.add("0_1",["21","22"]);
    dsy.add("0_1_0",["211"]);
    dsy.add("0_1_1",["221","222"]);dsy.add("0_2",["31","32","33"]);
    dsy.add("0_2_0",["311"]);
    dsy.add("0_2_1",["321","322"]);
    dsy.add("0_2_2",["331","332","333"]);
    //-->
    </SCRIPT>
    <SCRIPT LANGUAGE = JavaScript>
    <!--
    //** 秋水
    var s=["s1","s2","s3"];
    var opt0 = ["请","选","择"];
    function setup()
    {
     for(i=0;i<s.length-1;i++)
      document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
     change(0);
    }
    //-->function addRow() 
    {  
        var root = document.getElementById("tbody"); 
        var allRows = root.getElementsByTagName('tr'); 
        var cRow = allRows[0].cloneNode(true) 
        root.appendChild(cRow); 
         
    }  
    function removeRow(r) 

        var root = r.parentNode; 
        var allRows = root.getElementsByTagName('tr') 
        if(allRows.length>  1) 
            {root.removeChild(r);} 
        else 
            alert("only one row left, you can not remove it!"); 
    }</SCRIPT>
    </head>
    <body  onload="setup()">
    多级关联菜单:
    <form name="frm">
      <table>
    <tbody id="tbody"> 
    <tr>     
            <td>
    <select id="s1"><option>请</option></select>
    <select id="s2"><option>选</option></select>
    <select id="s3"><option>择</option></select>
    <input type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)">  
    </td></tr>
     </tbody>
    <tr>
    <td><input name="button" type="button" value="Add row" onclick="addRow()">  <input type="submit" name="Submit" value="search">    </td> 
    </tr> 
        </table> 
    </form>
    </body>
    </html>
      

  2.   


    var e=t.parentNode.parentNode.city;//这是我写的,不对,实现不了 var e=t.parentNode.nextSibling.firstChild;试试吧,看行不行...你这个代码只能在IE7.0里面用