动态无刷新级联下拉框(无级限制)

发布时间:2016-12-7 16:43:57 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"动态无刷新级联下拉框(无级限制)",主要涉及到动态无刷新级联下拉框(无级限制)方面的内容,对于动态无刷新级联下拉框(无级限制)感兴趣的同学可以参考一下。

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

上一篇:quartz中CronTrigger的使用说明
下一篇:我的博客在这里:http://www.chenjindu.name

相关文章

相关评论