动态无刷新级联下拉框（无级限制）

     前几天做级联下拉框，网上搜索了一下，挺多的，静态的居多，动态的也有，但遗憾的是没有找到我需要的。后来我自己写了一个脚本，实现了从数据库中取出数据，形成动态的下拉框， 可以是无限级(因为实现方法是把页面的下拉框名称当作参数传递，因为同一页面相同名称的控件是不存在的，因此可以实现），当然这些可能无意义，现在就看三级下拉框。无刷新，是因为页面加载时把数据全部加载到了页面中；实现动态级联，是因为下级菜单与上级有某种关联（这是肯定的）。下面就说说其具体实现。

脚本部分
<script type="text/javascript">
<!--     
 
 //初始化一级下拉框,iSelect为要初始化级联下拉框的组数，如果只有一组，则为1 
 function init(iSelect)
 {
  var i;
  var j;
  for(i=0;i<iSelect;i=i+1)
  {
   //selectName为二维数组，其中selectName[i][0]存放的是要初始化的一级下拉框的名字
   with(eval("this.document.forms[0]."+selectName[i][0]))
   {
    for(j=0;j<eval(selectName[i][0]+".length");j=j+2)
    {
     var oOption = document.createElement("OPTION");
     oOption.value=eval(selectName[i][0]+"[j]");
     oOption.text=eval(selectName[i][0]+"[j+1]");
     options.add(oOption);
    }
   }
  }
 }
 
 //动态关联各级下拉框，boxName下拉框的名字，num下拉框的级别，
 //比如国家，省，城市三级，则与省对应 trendsSelect(ProvinceName,2)
 function trendsSelect(boxName,num)
 { 
  var i; 
  var length;
  var j; 
  var arrTemp;
  //selectName[i][num-1]存放的是“i”组菜单的“num”级下拉框的名字
  for(i=0;i<selectName.length;i=i+1)
  {
   //确定为第几组下拉框
   if(boxName==selectName[i][num-1])
   {
    with(eval("this.document.forms[0]."+selectName[i][num-1]))
    {
     arrTemp=options[options.selectedIndex].value;    
    } 
       
    if(num<selectName[i].length)
    {  
     with(eval("document.forms[0]."+selectName[i][num]))
     {
      length=0;
      //首先给下一级下拉框赋初始值
      var oOption = document.createElement("OPTION");
      oOption.value="-1";
      oOption.text="请选择";
      options.add(oOption);
      
      for(j=0;j<eval(selectName[i][num]+".length");j=j+3)
      {
       if(arrTemp==eval(selectName[i][num]+"[j+2]"))
       {
        var oOption = document.createElement("OPTION");
        oOption.value=eval(selectName[i][num]+"[j]");
        oOption.text=eval(selectName[i][num]+"[j+1]");
        options.add(oOption);
       }
      }
     }
    }
    var boxName=selectName[i][num];
    //递归调用
    trendsSelect(boxName,num+1);
    
   }
  } 
  
 }

 //响应FORM中onreset事件;
 function rt(iSelect)
 {
  var i;   
  for(i=0;i<iSelect;i=i+1)
  {
   for(j=1;j<selectName[i].length;j=j+1)
   {
    with(eval("document.forms[0]."+Sel[i][j]))
    {
     length=0;
     var oOption = document.createElement("OPTION");
     oOption.value="-1";
     oOption.text="请选择";
     options.add(oOption);
     } 
   }
  }
 }
 //判断必选下拉框是否已经选择，如不需要可以不调用，isNull[i]存放的是下拉框的名字
 function isNullWithBox()
 {  
  var i;  
  for(i=0;i<isNull.length;i=i+1)
  {
   var boxTemp = eval("document.forms[0]." + isNull[i]).value;
   if(boxTemp=="-1")
   {  
    alert("此下拉框必选");
    eval("document.forms[0]." + isNull[i]).focus();
    return false;
   }
  }  
  
  
  return true;
  
 ｝

         
//-->
</script>

引用脚本页面的部分代码
<script type="text/javascript">
<!--
 //selectName为二维数组，其中存放的是要各级下拉框的名字
 //第一组级联下拉框selectName[0]，第二组级联下拉框selectName[1]
 var selectName=new Array();
 selectName[0]=new Array("CountryID","ProvinceID","CityID");
 //必选下拉框数组，如果“ProvinceID”，也为必选，
 //则var isNull=new Array("CountryID"，"ProvinceID");
 var isNull=new Array("CountryID");
 
 //定义存放数据库中各级下拉框中的内容的数组
 var CountryID=new Array();
 var ProvinceID=new Array();
 var CityID=new Array();

//-->
</script>
<%   
 //数据库传值，也可以是结果集，根据实际情况使用
 ArrayList alCountry=(ArrayList)request.getAttribute("lCountry");
 ArrayList alProvince=(ArrayList)request.getAttribute("lProvince");
 ArrayList alCity=(ArrayList)request.getAttribute("lCity"); 
 for(int i=0;i<alCountry.size();i++)
 {
  //这里作者使用数据表对象
  TCountry tCountry=(TCountry)alCountry.get(i);
  int j=2*i;//间隔为2
%>
<SCRIPT LANGUAGE="JavaScript">
   //2的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
   CountryID[<%=j%>]=["<%=tCountry.getCountryid()%>"];             
   CountryID[<%=j+1%>]=["<%=tCountry.getCountryname()%>"];
</SCRIPT>
<%}
 for(int i=0;i<alProvince.size();i++)
 {
  TProvince tProvince=(TProvince)alProvince.get(i);
  int j=3*i;//间隔为3
%>
<SCRIPT LANGUAGE="JavaScript"> 
   //3的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
   //3的倍数+2  存放上一级ID，供下拉框匹配上一级使用
   ProvinceID[<%=j%>]=["<%=tProvince.getProvinceid()%>"];
   ProvinceID[<%=j+1%>]=["<%=tProvince.getProvincename()%>"];
   ProvinceID[<%=j+2%>]=["<%=tProvince.getParentid()%>"];  
</SCRIPT>
<%}
 for(int i=0;i<alCity.size();i++)
 {
  TCity tCity=(TCity)alCity.get(i);
  int j=3*i;//间隔为3
%>
<SCRIPT LANGUAGE="JavaScript"> 
   //3的倍数存放ID，是下拉框的VALUE值，同时供下一级下拉框使用
   //3的倍数+2  存放上一级ID，供下拉框匹配上一级使用
   CityID[<%=j%>]=["<%=tCity.getCityid()%>"];
   CityID[<%=j+1%>]=["<%=tCity.getCityname()%>"];
   CityID[<%=j+2%>]=["<%=tCity.getProvinceid()%>"];  
</SCRIPT>
<%}%>

<tr>
 <TD align="right">请选择所在地区</TD>
 <TD> 
  <SELECT name="CountryID" οnchange="trendsSelect('CountryID',1)" >
   <OPTION value="-1">请选择</OPTION>   
  </SELECT>&nbsp;&nbsp;
  <SELECT name="ProvinceID" οnchange="trendsSelect('ProvinceID',2)">
   <OPTION value="-1">请选择</OPTION> 
  </SELECT>&nbsp;&nbsp;
  <SELECT name="CityID">
   <OPTION value="-1">请选择</OPTION>  
  </SELECT>
 </TD>
</tr>

<SCRIPT LANGUAGE="JavaScript"> 
<!--
 //初始化一级下拉框,其中参数为要初始化级联下拉框的组数，如果有两组，则为2 
 init(1);
//-->
</SCRIPT>

就说这么多，希望对你有用，也希望提出你的意见。