动态无刷新级联下拉框（无级限制）[转载]

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

脚本部分
<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" onchange="trendsSelect('CountryID',1)" >
   <OPTION value="-1">请选择</OPTION>  
  </SELECT>&nbsp;&nbsp;
  <SELECT name="ProvinceID" onchange="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>


就说这么多，希望对你有用，也希望提出你的意见。
from:http://blog.csdn.net/opossum/archive/2006/09/21/1261460.aspx

评论

2 楼 gaozhonghui 2008-08-28  

 

1 楼 gaozhonghui 2008-08-28