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頁面實現了填充。