用AJAX获取二级、三级下拉列表(例子)

 

-------------------------------js代码------------------------------------------

 

<script type="text/javascript">

function getChapter(oid){
    
     
  xmlURL = "theme.do?method=getChapater&&courseId="+oid.value;
   var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //这个对象用来发出Http请求
  xmlDoc.async="false"; //同步、异步
  xmlDoc.load(xmlURL); //发出请求 
  xmlObj=xmlDoc.documentElement; //根节点 
  document.form1.chapterId.options.length = 0; //清空章节下拉框  
  if(xmlObj.childNodes.length==0)
  {
     document.forms[0].chapterId.add(document.createElement("OPTION"));
     document.forms[0].chapterId.options[0].text="暂无"
  } 
  else
  {  
    for (var i=0; i<xmlObj.childNodes.length ; i++) {
   label=xmlObj.childNodes(i).text;
   values=xmlObj.childNodes[i].getAttribute("id");
   document.form1.chapterId.add(document.createElement("OPTION"));
   document.form1.chapterId.options[i].text = label;
   document.form1.chapterId.options[i].value= values;
   }
  }     
  }
  
  function getLore(oid){  
  xmlURL = "theme.do?method=getLore&&chapterId="+oid.value;
 
  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //这个对象用来发出Http请求
  xmlDoc.async="false"; //同步、异步
  xmlDoc.load(xmlURL); //发出请求 
  xmlObj=xmlDoc.documentElement; //根节点 
  document.form1.loreId.options.length = 0; //清空章节下拉框  
  
  if(xmlObj.childNodes.length==0)
  {
     document.forms[0].loreId.add(document.createElement("OPTION"));
     document.forms[0].loreId.options[0].text="暂无"
  } 
  else
  {  
  for (var i=0; i<xmlObj.childNodes.length ; i++) {
   label=xmlObj.childNodes(i).text;
   values=xmlObj.childNodes[i].getAttribute("id");
   document.form1.loreId.add(document.createElement("OPTION"));
   document.form1.loreId.options[i].text = label;
   document.form1.loreId.options[i].value= values;
   }
  }
  }
  </script>

 

 

 

------------------------------------ jsp页面------------------------------------------

<table width="100%" border="0" cellspacing="0"
                cellpadding="0">
                <tr>
                 <td width="44%" align="left">
                  <select name="courseId" onchange=getChapter(this)>
                   <option value="0" selected="selected">
                    请选择课程
                   </option>
                   <c:forEach items="${courseList}" var="course">
                    <option value="${course.courseId}">
                     ${course.courseName}
                    </option>
                   </c:forEach>
                  </select>
                  <select name="chapterId" onchange=getLore(this)>
                   <option value="0" selected="selected">
                    请选择章节
                   </option>
                  </select>
                  <select name="loreId">
                   <option value="0" selected="selected">
                    请选择知识点
                   </option>
                  </select>
                 </td>
                </tr>
               </table>

 

---------------------------------------------------JAVA代码 -----------------------------------

/**
  * 根据课程编号得到该编号下的所有章节
  *
  * @param mapping
  * @param form
  * @param request
  * @param response
  * @return
  * @throws IOException
  */
 public void getChapater(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {

  ChapterForm chapterForm = new ChapterForm();
  int courseId = RequestUtil.getIntParameter(request, "courseId", 0);
  if (courseId != 0) {
   chapterForm.setCourseId(courseId);
   Collection collection = baseFactory.getLoreDaoInter().getChapters(
     chapterForm);

   PrintWriter out = null;
   try {
    response.setContentType("text/xml; charset=GB2312");
    out = response.getWriter();
    out.println("<?xml version=/"1.0/" encoding=/"GB2312/"?>");
    out.println("<chapters>");
    for (Iterator iter = collection.iterator(); iter.hasNext();) {
     ChapterForm chapterForm1 = (ChapterForm) iter.next();
     out.println("<chapter id=/"" + chapterForm1.getChapterId()
       + "/">" + chapterForm1.getChapterName()
       + "</chapter>");
    }
    out.println("</chapters>");
    out.flush();
    out.close();
   } catch (IOException e) {
    e.printStackTrace();
   }
  } else {
   PrintWriter out = null;
   try {
    response.setContentType("text/xml; charset=GB2312");
    out = response.getWriter();
    out.println("<?xml version=/"1.0/" encoding=/"GB2312/"?>");
    out.println("<chapters>");
    out.println("<chapter id=/"" + 0 + "/">" + "--请选择--"
      + "</chapter>");
    out.println("</chapters>");
    out.flush();
    out.close();
   } catch (IOException e) {
    e.printStackTrace();
   }
  }
 }