JSP页面中如何用select标签实现级联

做查询页面，查询条件比较多的时候往往会涉及到级联。举个简单的例子，拿教务系统来说，我们要查询教学计划信息，查询条件是入学批次、学生层次（专升本、高升专）、专业、课程。

它们之间有什么级联关系呢？入学批次影响学生层次（某个入学批次可能只有专升本或者高升专一个学生层次）、专业、课程，学生层次影响专业、课程，专业又影响课程。也就是说当选择入学批次时，学生层次、专业和课程的下拉框会局部刷新，选择学生层次时，专业和课程的下拉框会局部刷新，选择专业时，课程的下拉框也会局部刷新。

我们当然不希望已经选择的操作随着页面的刷新又被初始化，再者前面提到选择一项后相关的下拉框是局部刷新。很容易想到用填充页面的方法来实现级联。

笔者的填充方法是通过提交js，由controller获取数据，将数据传到辅助的jsp页面，再用回调函数将辅助jsp页面中的数据填充给相应下拉框。说的抽象，直接上代码了，四级级联稍微麻烦一些，知道原理后也好做，笔者上三级级联的代码。级联样式如下图：

 jsp页面代码：

   <table>
    <tr>
     <td width="400px" align="left">入学批次：<select name="grade"
      id="grade" onchange="refreshedulevelandspecialajax();">  //选择入学批次会刷新层次和专业
       <option value="0">
        --请选择--
        <c:foreach items="${gradeinfo}" var="gradeinfo">
         <option value="${gradeinfo.gradename}">${gradeinfo.gradename}        
        </c:foreach>
     </select></td>
     <td width="400px" align="left">统考课程：<select
      name="uniexamcourseid" id="uniexamcourseid">
       <option value="0">
        --请选择--
        <c:foreach items="${unifiedexamcourselist}" var="uniexamcourse">
         <option value="${uniexamcourse.id}">${uniexamcourse.uniexamcoursename}        
        </c:foreach>
     </select></td>
    </tr>
    <tr>
     <td colspan="2" id="refreshedulevelandspecialajax">    //设置id，用于填充层次和专业的下拉框
      <table>
       <tr>
        <td width="400" align="left">层       次：<select
         name="edulevelid" id="edulevelid"
         onchange="refreshspecialajax();">    //选择层次后刷新专业
          <option value="0">--请选择--</option>
          <c:foreach items="${educationlevel}" var="educationlevel">
           <option value="${educationlevel.id}">${educationlevel.educationlevelname}          
          </c:foreach>
        </select></td>
        <td width="400" align="left" id="refreshspecialajax">专        业：<select            //设置id，用于填充专业的下拉框
         name="specialid" id="specialid">
          <option value="0">--请选择--</option>
          <c:foreach items="${speciallist}" var="special">
           <option value="${special.id}">${special.specialname}          
          </c:foreach>
        </select></td>
       </tr>
      </table>
     </td>
    </tr>
   </table>

js的代码如下：

//javascript document
 var xmlhttp; //用于保存xmlhttprequest对象的全局变量
 //用于创建xmlhttprequest对象
 function createxmlhttp() {
  //根据window.xmlhttprequest对象是否存在使用不同的创建方式
  if (window.xmlhttprequest) {
   xmlhttp = new xmlhttprequest(); //firefox、opera等浏览器支持的创建方式
  } else {
   xmlhttp = new activexobject("microsoft.xmlhttp");//ie浏览器支持的创建方式
  }
 }
 function refreshedulevelandspecialajax() {
  var grade = document.getelementbyid("grade").value;
  refreshedulevelandspecial(grade);
 }
 function refreshedulevelandspecial(grade) {
  createxmlhttp(); //创建xmlhttprequest对象
  xmlhttp.onreadystatechange = refreshedulevelandspecialelement; //设置回调函数
  xmlhttp.open("post", "edulevelandspecialbygradenameinspecialdetail",
    true); //发送post请求
  xmlhttp.setrequestheader("content-type",
    "application/x-www-form-urlencoded");
  xmlhttp.send("grade=" + grade);
 }
 //处理服务器返回的信息 更新层次专业下拉框
 function refreshedulevelandspecialelement() {
  if (xmlhttp.readystate == 4) {
   if (xmlhttp.status == 200) {
    //此处xmlhttp.responsetext是请求的*controller的某个方法返回的渲染页面的源代码
    document.getelementbyid("refreshedulevelandspecialajax").innerhtml = xmlhttp.responsetext;
   }
  }
 }
 function refreshspecialajax() {
  var grade = document.getelementbyid("grade").value;
  var edulevelid = document.getelementbyid("edulevelid").value;
  refreshspecial(grade, edulevelid);
 }
 function refreshspecial(grade, edulevelid) {
  createxmlhttp(); //创建xmlhttprequest对象
  xmlhttp.onreadystatechange = refreshspecialelement; //设置回调函数
  xmlhttp.open("post", "specialbygradenameandedulevelidinspecialdetail",
    true); //发送post请求
  xmlhttp.setrequestheader("content-type",
    "application/x-www-form-urlencoded");
  xmlhttp.send("grade=" + grade + "&edulevelid=" + edulevelid);
 }
 //处理服务器返回的信息 更新专业下拉框
 function refreshspecialelement() {
  if (xmlhttp.readystate == 4) {
   if (xmlhttp.status == 200) {
    //此处xmlhttp.responsetext是请求的*controller的某个方法返回的渲染页面的源代码
    document.getelementbyid("refreshspecialajax").innerhtml = xmlhttp.responsetext;
   }
  }
 }

controller代码：

@requestmapping(value = "/edulevelandspecialbygradenameinspecialdetail")
  public modelandview getedulevelandspecialbygradenameinspecialdetail(httpservletrequest request,
    httpservletresponse response) throws jsonparseexception, jsonmappingexception, jsonexception, ioexception{  
   string gradename=request.getparameter("grade");    
   string edulevelid=request.getparameter("edulevelid");  
   if(gradename==null||gradename.equals("0")){   
    gradename="null";
   }
   if(edulevelid==null||edulevelid.equals("0")){   
    edulevelid="null";
   }
   arraylist<utilobject> edulevellist=uess.getedulevelidbygradenameinspecialdetail(gradename);
   arraylist<utilobject> specialidlist=uess.getspecialidbygradenameandedulevelidinspecialdetail(gradename, edulevelid);  
   mav.addobject("educationlevel", edulevellist);
   mav.addobject("speciallist", specialidlist);
   mav.setviewname("scoremanage/uniexamscore/edulevelandspecialajax");
   return mav;
  }
  @requestmapping(value = "/specialbygradenameandedulevelidinspecialdetail", method = requestmethod.post)
  public modelandview getspecialbygradenameandedulevelidinspecialdetail(httpservletrequest request,
    httpservletresponse response) throws jsonparseexception, jsonmappingexception, jsonexception, ioexception{
   string gradename=request.getparameter("grade"); 
   string edulevelid=request.getparameter("edulevelid");
   system.out.println("grade:"+gradename+"  edulevelid:"+edulevelid);
   if(gradename==null||gradename.equals("0")){   
    gradename="null";
   }
   if(edulevelid==null||edulevelid.equals("0")){   
    edulevelid="null";
   }
   arraylist<utilobject> speciallist=uess.getspecialidbygradenameandedulevelidinspecialdetail(gradename, edulevelid);  
   mav.addobject("speciallist", speciallist);
   mav.setviewname("scoremanage/uniexamscore/specialajax");
   return mav;
  }

后台代码没有给出来，但应该看得懂，就是获取后台数据传到edulevelandspecialajax.jsp和specialajax.jsp页面。这两个页面用于填充原页面，通过id来填充相应区域，两个页面代码如下。
edulevelandspecialajax.jsp辅助页面：

<td id="refreshedulevelandspecialajax">    //id用于填充原页面
    <table>
    <tr>
     <td width="400px" align="left">层       次：<select
      id="edulevelid" name="edulevelid" onchange="refreshspecialajax();">
       <option value="0">--请选择--</option>
       <c:foreach items="${educationlevel}" var="educationlevel">
        <option value="${educationlevel.id}">${educationlevel.name}</option>
       </c:foreach>
     </select></td>
     <td width="400px" align="left" id="refreshspecialajax">专        业：<select                               //id用于填充原页面
      name="specialid" id="specialid">
       <option value="0">--请选择--</option>
       <c:foreach items="${speciallist}" var="special">
        <option value="${special.id}">${special.name}
       </c:foreach>
     </select></td>
     </tr>
    </table>
   </td>

specialajax.jsp辅助页面：

<td width="400" align="left" id="refreshspecialajax">专        业：<select
    name="specialid" id="specialid">    //id用于填充原页面
     <option value="0">--请选择--</option>
     <c:foreach items="${speciallist}" var="special">
      <option value="${special.id}">${special.name}
     </c:foreach>
   </select></td>

这样就在jsp页面实现了填充。