JSP+AJAX实现下拉列表联动

<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)
              {
                     varoOption = 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;
                     //首先给下一级下拉框赋初始值
                           varoOption = 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]"))
                                  {
                                         varoOption = document.createElement("OPTION");
                                         oOption.value=eval(selectName[i][num]+"[j]");
                                         oOption.text=eval(selectName[i][num]+"[j+1]");
                                         options.add(oOption);
                                  }
                                  }
                     }
             }
             varboxName=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]=newArray("CountryID","ProvinceID","CityID");
//必选下拉框数组，如果“ProvinceID”，也为必选，
//则var isNull=newArray("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>

 

 

 

 

 

 

 

AJAX实现的简单的无刷新效果，页面中有两个下拉框，当第一个下拉框改变时，提交请求到后台，查找到对应的数据，添加到第二个下拉框列表里。代码如下：

 

<html>

 <head>

 <script type="text/javascript">

 

 

  //Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表

 

   //根据浏览器的类型，创建xmlHttpRequest对象

  function createXmlHttpRequest()

    {

       if(window.ActiveXObject)

       {

           return new ActiveXObject("Microsoft.XMLHTTP");

       }

       else if( window.XMLHttpRequest())

       {

           return new XMLHttpRequest();

       }   

    }

   var xmlHttpRequest;

 

   //异步响应函数

   function search(para)

    {

       var url="/search?para="+para;     //后台请求的路径

     

       xmlHttpRequest=createXmlHttpRequest();

     

       xmlHttpRequest.onreadystatechange=callback;   //将回调函数注册给状态改变事件

     

       xmlHttpRequest.open("GET",url,true);

     

       xmlHttpRequest.send(null);

         

   }   

  

   //回调函数

   function callback()

   {    

        var dlCity=document.getElementById("city");

 

 

 

        //请求被成功响应，已接收到结果

        if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)

        {                   

            var result=xmlHttpRequest.responseText;          //返回的结果字符串

            //var result = "哈尔滨|大庆||鹤岗|佳木斯|牡丹江";

                       

           var cityArray= result.split("|");   //返回的结果字符串中，值之间是以|分隔的，所以先拆分成数组

           var count = cityArray.length;

           dlCity.length=0;   //先将下拉列表框清空

           for (var i = 0; i <count; i++)

           {  

                dlCity.options.add(newOption(cityArray[i], cityArray[i]));   //将结果循环添加到下拉列表中

           } 

          

        }

        else

        {

            dlCity.length=0;

            dlCity.options.add(new Option("请等待...","-1"));

        }

       

    }

   

 //下拉框改变事件

 function changeCityOptions()

 {

    var dlProvince=document.getElementById("province");

    var dlCity=document.getElementById("city");

    dlCity.length=0;

    if(dlProvince.value==-1)

    {   

        dlCity.options.add(new Option("城市列表","-1"));

    }

    else

    {

        search(dlProvince.value);

    }

   return;  

 }

 </script>

</head>

<body>

 <select name="province"  id="province"οnchange="changeCityOptions()">

 <option value="-1">选择省份</option>

 

 <option value="1">黑龙江</option>

 

 <option value="2">吉林</option>

 </select>

 <select name="city"id="city">

 <option value="-1">城市列表</option>

 </select>

</body>

</html>