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());
%>
分享到:
相关推荐
省市县三级菜单联动(mysql+ajax+json+php),很简单易懂的代码,这段代码可以直接拿到项目中使用
项目开发中经常用到的联动菜单,该示例代码用ajax实现 非常方便,下载后可以自行扩展
用ajax实现的jsp二级联动下拉列表,使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中,就一个字------烦
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
AJAX无限级联动菜单 使用ASP.NET+AJAX和ACCESS数据库开发 简单易懂
最近收集了很多联动菜单. 下拉联动菜单,有涉及到数据库的,有ajax的,有无限级ajax联动菜单. ....
使用ajax实现的二级级联菜单,简单易学
ASP 实用的ajax二级联动菜单
1、javascript实现二级联动:运用jsp标签拼写Javascript代码,实现一个二维数组,点击一级栏目时,查询二维数组里...2,ajax实现的二级联动:利用Ajax与后台程序实现异步交互,后台程序拼写JOSN字符串,发送到客户端。
ajax+json实现多级联动菜单.doc
Ajax 菜单 联动 c#菜单 .net菜单
AJAX三级联动菜单 用AJAX和jsp,servlet实现
ajax+jsp实现的多级联动菜单的实现。
ajax初级入门。 无刷新实现省市2级菜单联动。 代码简单,很容易明白。
ajax实现联动菜单.doc ajax实现联动菜单.doc
基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar
ajax+jsp实现的四级联动菜单,里面有相应的代码和jsp页面。
ajax技术中利用dwr框架实现二级联动菜单,页面无刷新
Ajax菜单二级联动,可以使用更强大的Ajax实现。很适全初学者