欢乐颂第三季,好看的言情小说

主頁 > 知識庫 > JSP頁面中如何用select標(biāo)簽實(shí)現(xiàn)級聯(lián)

JSP頁面中如何用select標(biāo)簽實(shí)現(xiàn)級聯(lián)

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

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

我們當(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é)批次會刷新層次和專業(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">層nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;次：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">專nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;業(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的某個方法返回的渲染頁面的源代碼
    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的某個方法返回的渲染頁面的源代碼
    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";
   }
   ArrayListUtilObject> eduLevelList=uess.getEduLevelIdByGradeNameInSpecialDetail(gradeName);
   ArrayListUtilObject> 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";
   }
   ArrayListUtilObject> specialList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);   
   mav.addObject("specialList", specialList);
   mav.setViewName("scoreManage/uniExamScore/specialAjax");
   return mav;
  }

后臺代碼沒有給出來，但應(yīng)該看得懂，就是獲取后臺數(shù)據(jù)傳到eduLevelAndSpecialAjax.jsp和specialAjax.jsp頁面。這兩個頁面用于填充原頁面，通過ID來填充相應(yīng)區(qū)域，兩個頁面代碼如下。
eduLevelAndSpecialAjax.jsp輔助頁面：

復(fù)制代碼代碼如下:

td id="refreshEduLevelAndSpecialAjax">    //ID用于填充原頁面
    table>
    tr>
     td width="400px" align="left">層nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;次：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">專nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;業(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">專nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;業(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自定義標(biāo)簽Taglib實(shí)現(xiàn)過程重點(diǎn)總結(jié)
jsp struts1 標(biāo)簽實(shí)例詳解
jsp頁面中如何將時間戳字符串格式化為時間標(biāo)簽
JSP自定義標(biāo)簽rtexprvalue屬性用法實(shí)例分析
jsp自定義標(biāo)簽用法實(shí)例詳解
JSP自定義分頁標(biāo)簽TAG全過程
JSP中常用的JSTL fmt(format格式化)標(biāo)簽用法整理
Jsp自定義標(biāo)簽和方法詳解

標(biāo)簽：云浮江西西藏貴州紅河丹東宿州青島

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《JSP頁面中如何用select標(biāo)簽實(shí)現(xiàn)級聯(lián)》，本文關(guān)鍵詞 JSP,頁面,中如,何用,select,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。