做查詢頁面，查詢條件比較多的時(shí)候往往會(huì)涉及到級聯(lián)。舉個(gè)簡單的例子，拿教務(wù)系統(tǒng)來說，我們要查詢教學(xué)計(jì)劃信息，查詢條件是入學(xué)批次、學(xué)生層次（專升本、高升專）、專業(yè)、課程。

它們之間有什么級聯(lián)關(guān)系呢？入學(xué)批次影響學(xué)生層次（某個(gè)入學(xué)批次可能只有專升本或者高升專一個(gè)學(xué)生層次）、專業(yè)、課程，學(xué)生層次影響專業(yè)、課程，專業(yè)又影響課程。也就是說當(dāng)選擇入學(xué)批次時(shí)，學(xué)生層次、專業(yè)和課程的下拉框會(huì)局部刷新，選擇學(xué)生層次時(shí)，專業(yè)和課程的下拉框會(huì)局部刷新，選擇專業(yè)時(shí)，課程的下拉框也會(huì)局部刷新。

我們當(dāng)然不希望已經(jīng)選擇的操作隨著頁面的刷新又被初始化，再者前面提到選擇一項(xiàng)后相關(guān)的下拉框是局部刷新。很容易想到用填充頁面的方法來實(shí)現(xiàn)級聯(lián)。

筆者的填充方法是通過提交JS，由Controller獲取數(shù)據(jù)，將數(shù)據(jù)傳到輔助的JSP頁面，再用回調(diào)函數(shù)將輔助JSP頁面中的數(shù)據(jù)填充給相應(yīng)下拉框。說的抽象，直接上代碼了，四級級聯(lián)稍微麻煩一些，知道原理后也好做，筆者上三級級聯(lián)的代碼。級聯(lián)樣式如下圖：

 JSP頁面代碼：
復(fù)制代碼 代碼如下:
   <table>
    <tr>
     <td width="400px" align="left">入學(xué)批次：<SELECT NAME="grade"
      id="grade" onchange="refreshEduLevelAndSpecialAjax();">  //選擇入學(xué)批次會(huì)刷新層次和專業(yè)
       <OPTION VALUE="0">
        --請選擇--
        <c:forEach items="${gradeInfo}" var="gradeInfo">
         <OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}        
        </c:forEach>
     </SELECT></td>
     <td width="400px" align="left">統(tǒng)考課程：<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">    //設(shè)置ID，用于填充層次和專業(yè)的下拉框
      <table>
       <tr>
        <td width="400" align="left">層       次：<SELECT
         NAME="eduLevelId" id="eduLevelId"
         onchange="refreshSpecialAjax();">    //選擇層次后刷新專業(yè)
          <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">專        業(yè)：<SELECT            //設(shè)置ID，用于填充專業(yè)的下拉框
         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的代碼如下：
復(fù)制代碼 代碼如下:
//JavaScript Document
 var xmlHttp; //用于保存XMLHttpRequest對象的全局變量
 //用于創(chuàng)建XMLHttpRequest對象
 function createXmlHttp() {
  //根據(jù)window.XMLHttpRequest對象是否存在使用不同的創(chuàng)建方式
  if (window.XMLHttpRequest) {
   xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創(chuàng)建方式
  } else {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器支持的創(chuàng)建方式
  }
 }
 function refreshEduLevelAndSpecialAjax() {
  var grade = document.getElementById("grade").value;
  refreshEduLevelAndSpecial(grade);
 }
 function refreshEduLevelAndSpecial(grade) {
  createXmlHttp(); //創(chuàng)建XMLHttpRequest對象
  xmlHttp.onreadystatechange = refreshEduLevelAndSpecialElement; //設(shè)置回調(diào)函數(shù)
  xmlHttp.open("POST", "eduLevelAndSpecialByGradeNameInSpecialDetail",
    true); //發(fā)送POST請求
  xmlHttp.setRequestHeader("Content-type",
    "application/x-www-form-urlencoded");
  xmlHttp.send("grade=" + grade);
 }
 //處理服務(wù)器返回的信息 更新層次專業(yè)下拉框
 function refreshEduLevelAndSpecialElement() {
  if (xmlHttp.readyState == 4) {
   if (xmlHttp.status == 200) {
    //此處xmlHttp.responseText是請求的*Controller的某個(gè)方法返回的渲染頁面的源代碼
    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(); //創(chuàng)建XMLHttpRequest對象
  xmlHttp.onreadystatechange = refreshSpecialElement; //設(shè)置回調(diào)函數(shù)
  xmlHttp.open("POST", "specialByGradeNameAndEduLevelIdInSpecialDetail",
    true); //發(fā)送POST請求
  xmlHttp.setRequestHeader("Content-type",
    "application/x-www-form-urlencoded");
  xmlHttp.send("grade=" + grade + "&eduLevelId=" + eduLevelId);
 }
 //處理服務(wù)器返回的信息 更新專業(yè)下拉框
 function refreshSpecialElement() {
  if (xmlHttp.readyState == 4) {
   if (xmlHttp.status == 200) {
    //此處xmlHttp.responseText是請求的*Controller的某個(gè)方法返回的渲染頁面的源代碼
    document.getElementById("refreshSpecialAjax").innerHTML = xmlHttp.responseText;
   }
  }
 }

Controller代碼：
復(fù)制代碼 代碼如下:
@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;
  }

后臺(tái)代碼沒有給出來，但應(yīng)該看得懂，就是獲取后臺(tái)數(shù)據(jù)傳到eduLevelAndSpecialAjax.jsp和specialAjax.jsp頁面。這兩個(gè)頁面用于填充原頁面，通過ID來填充相應(yīng)區(qū)域，兩個(gè)頁面代碼如下。
eduLevelAndSpecialAjax.jsp輔助頁面：
復(fù)制代碼 代碼如下:
<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">專        業(yè)：<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輔助頁面：
復(fù)制代碼 代碼如下:
<td width="400" align="left" id="refreshSpecialAjax">專        業(yè)：<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頁面實(shí)現(xiàn)了填充。

jsp技術(shù)：JSP頁面中如何用select標(biāo)簽實(shí)現(xiàn)級聯(lián)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。