1、编写表单
<form name="frm" method="get">
<select name="parent" οnchange="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());
%>