菜单联动的实现二（使用AJAX技术）

1、编写表单

       

<form name="frm" method="get">
  <select name="parent" onchange="changeDrop2()">
   <option value="-1">请选择</option>
   <%
   for(int i=0; i<categories.size(); i++) {
    Category c = categories.get(i);
    
    %>
    <option value="<%=c.getId() %>"><%=c.getName() %></option>
    <%
 
   }
   %>
  </select>
  <select name="child">
   <option value="-1">Child Not Selected!</option>
  </select>
 </form>

 2、用AJAX实现changeDrop2方法

      

<script type="text/javascript">
  var req;
  
  function init() {
   if(window.XMLHttpRequest) {
    req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
   }
  }
  
  function changeDrop2() {
   init();
   var url = "GetCategoryChilds.jsp?id=" + escape(document.frm.parent.options[document.frm.parent.selectedIndex].value);
   req.open("GET", url, true);
   req.onreadystatechange = callback;
   req.send(null);
  }
  
  function callback() {
   if(4 == req.readyState) {
       
    if(200 == req.status) {
     alert(req.responseText);
     eval(req.responseText);//执行服务器返回的javascript动态脚本
    }
   }
   
  }
 </script>

 3、用javascript编写动态脚本

       

<%
int id = Integer.parseInt(request.getParameter("id"));

List<Category> childs = CategoryService.getInstance().getChilds(id) ;
StringBuffer buf = new StringBuffer();
buf.append("document.frm.child.length = " + (childs.size()+1) + ";\n");
buf.append("document.frm.child.options[0].value = '-1';\n");
buf.append("document.frm.child.options[0].text = 'Pls Select!';\n");
buf.append("document.frm.child.selectedIndex = 0;\n");

for(int i=0; i<childs.size(); i++) {
	Category c = childs.get(i);
	buf.append("document.frm.child.options[" + (i+1) + "].value = '" + c.getId() + "';\n");
	buf.append("document.frm.child.options[" + (i+1) + "].text = '" + c.getName() + "';\n");
}

response.setContentType("text/html;charset=gbk");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevents catching at proxy server

response.getWriter().write(buf.toString());
%>