做了这么久了还没弄过动态级联下拉列表框，所以决定也整一个。
例子为：学校、班级、学生，三级下拉列表框，具体代码随后贴出。
得出的结论是Action设置get和set方法的属性，在前台页面中都可以通过eval解析为JSON对象，这就好办多了，我们可以用eval解析通过ajax读取的数据，然后直接使用就OK了。
<script type="text/javascript">
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
} else {
if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
}
}
//发送请求
function sendRequest(url, params, method) {
if (method) {
if (method.toLowerCase("post")) {
sendRequestPost(url, params);
} else {
if (method.toLowerCase("get")) {
sendRequestGet(url + "?" + params);
} else {
//
}
}
} else {
alert("\u63d0\u4ea4\u65b9\u5f0f\u4e0d\u80fd\u4e3a\u7a7a\uff01");
}
}
//post发送请求函数
function sendRequestPost(url, params) {
createXMLHttpRequest();
XMLHttpReq.open("POST", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
XMLHttpReq.send(params); // 发送请求
}
//get发送请求函数
function sendRequestGet(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
//post发送请求函数(无需传递参数时)
function sendRequestPostwihtnoArgs(url) {
createXMLHttpRequest();
XMLHttpReq.open("POST", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定回调函数
XMLHttpReq.send(null); // 发送请求
}
// 更新列表框
function update() {
var res = eval('('+XMLHttpReq.responseText+')');
var option = null;
var id_name_code = res.code.split("|");//拆分字符串，得到id与name(包括后缀字符串)的组合值
var id_result = id_name_code[0];//得到id的组合值(所有的id,以_隔开)
var name_result = id_name_code[1];//得到name的组合值(所有的name,以_隔开)
var result = id_name_code[2]; //得到后缀名字符串
//拆分以_隔开的字符串
var id = id_result.split("_");
var name = name_result.split("_");
if ("student" == result) {
clearStudent();
var studentId = document.getElementById("studentId");
for ( var i = 0; i < id.length; i++) {
option = new Option(name[i], id[i]);
studentId.options.add(option);
}
}
if ("class" == result) {
clearClass();
var classesId = document.getElementById("classId");
for ( var i = 0; i < id.length; i++) {
option = new Option(name[i], id[i]);
classesId.options.add(option);
}
}
if ("school" == result) {
clearSchool();
var schoolId = document.getElementById("schoolId");
for ( var i = 0; i < id.length; i++) {
option = new Option(name[i], id[i]);
schoolId.options.add(option);
}
}
}
// 清除列表框
function clearSchool() {
var schoolId = document.getElementById("schoolId");
while (schoolId.childNodes.length > 0) {
schoolId.removeChild(schoolId.childNodes[0]);
}
}
function clearClass() {
var classesId = document.getElementById("classId");
while (classesId.childNodes.length > 0) {
classesId.removeChild(classesId.childNodes[0]);
}
}
function clearStudent() {
var studentId = document.getElementById("studentId");
while (studentId.childNodes.length > 0) {
studentId.removeChild(studentId.childNodes[0]);
}
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { //信息已经成功返回，开始处理信息
update();
} else { //页面不正常
window.alert("未找到页面");
}
}
}
function findStubyClasslId() {
var classId = document.frmMenu.classId.value;
var sURL = "allStu";
var method = "post";
var sParams = "classId=" + classId;
sendRequest(sURL, sParams, method);
}
function findClassbySchoolId() {
var schoolId = document.frmMenu.schoolId.value;
var sURL = "allClass";
var method = "post";
var sParams = "schoolId=" + schoolId;
sendRequest(sURL, sParams, method);
}
function findAllSchool() {
var sURL = "allSchool";
sendRequestPostwihtnoArgs(sURL);
}
</script>
<body onload="findAllSchool()">
<form name="frmMenu">
<br>
<hr>
<div align="center">
信息查询
<br>
<br>
<select name="schoolId" id="schoolId"
onblur="findClassbySchoolId()">
<option selected value="">
请选择学校
</option>
</select>
<select name="classId" id="classId" onblur="findStubyClasslId()">
<option selected value="">
请选择班级
</option>
</select>
<select name="studentId" id="studentId">
<option selected value="">
请选择学生
</option>
</select>
</div>
</form>
</body>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="false" />
<package name="default1" namespace="/" extends="json-default">
<action name="allSchool" class="ajax.demo.action.CasecadingMenuAction" method="queryAllSchool">
<result name="success" type="json" />
</action>
<action name="allClass" class="ajax.demo.action.CasecadingMenuAction" method="queryAllClass">
<result name="success" type="json"/>
</action>
<action name="allStu" class="ajax.demo.action.CasecadingMenuAction" method="queryAllStudent">
<result name="success" type="json"/>
</action>
</package>
</struts>
package ajax.demo.action;
import java.util.List;
import net.sf.json.JSONObject;
import org.apache.struts2.json.annotations.JSON;
import ajax.demo.dao.CascadeMenuDAO;
import ajax.demo.model.Menu;
import com.opensymphony.xwork2.ActionSupport;
public class CasecadingMenuAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private String id="";
private String schoolId;
private String name="";
private String classId;
private String code;
public String queryAllSchool() {
List schoolList = new CascadeMenuDAO().findAllSchool();
// 写入到被前台页面接收的字符串，id和name以_隔开 以"school"结尾
for (int i = 0; i < schoolList.size(); i++) {
Menu menu = (Menu) schoolList.get(i);
id += menu.getId() + "_";
name += menu.getName() + "_";
}
code = id + "|" + name + "|school";
return ActionSupport.SUCCESS;
}
public String queryAllClass() {
int sId = Integer.parseInt(schoolId);// 把从前台传来的参数转换成int类型的
List schoolList = new CascadeMenuDAO().findClassbySchoolid(sId); // 写入到被前台页面接收的字符串，id和name以_隔开
// 以"class"结尾
for (int i = 0; i < schoolList.size(); i++) {
Menu menu = (Menu) schoolList.get(i);
id += menu.getId() + "_";
name += menu.getName() + "_";
}
code = id + "|" + name + "|class";
return ActionSupport.SUCCESS;
}
public String queryAllStudent() {
int cId = Integer.parseInt(classId);
List schoolList = new CascadeMenuDAO().findStubyclassId(cId); // 写入到被前台页面接收的字符串，id和name以_隔开
// 以"student"结尾
for (int i = 0; i < schoolList.size(); i++) {
Menu menu = (Menu) schoolList.get(i);
id += menu.getId() + "_";
name += menu.getName() + "_";
}
code = id + "|" + name + "|student";
return ActionSupport.SUCCESS;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getSchoolId() {
return schoolId;
}
public void setSchoolId(String schoolId) {
this.schoolId = schoolId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getClassId() {
return classId;
}
public void setClassId(String classId) {
this.classId = classId;
}
@JSON(name="code")
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
}
分享到：
相关推荐
使用ajax+struts2.0+jsp做的一个多下拉列表级联
JavaScript动态级联下拉列表框，内有样例，仅供参考和学习
数据是从mySql数据库中动态读取，运行sql文件即可，经测试是没问题的……
一个基于Ext+Struts2+spring实现的级联分页示例程序源码例子
NULL 博文链接：https://chenjia66804610.iteye.com/blog/576463
用Struts2+Spring+Hibernate三大框架完成的级联操作,包括省市县和年月日
JSON JQuery + Servlet +Json实现下拉框级联 json-lib-2.4-jdk15.jar所依赖jar的整理整理
struts2+ajax+json四级联动struts2+ajax+json四级联动
利用javascript+json实现级联查询
input 级联下拉列表 input 级联下拉列表 input 级联下拉列表 input 级联下拉列表 input 级联下拉列表
基于jQuery实现的多级级联下拉列表，返回数据类型JSON,后台使用Struts1.2
DWR+hibernate+spring级联下拉列表框 DWR+hibernate+spring级联下拉列表框
JavaScript解析XML实现多级级联下拉列表
此代码就是使用jquery简单实现级联下拉列表，
Struts2+Hibernate写的下拉菜单级联两级分类,不带JRA包,自己下载吧,
SSH +jquery+json做的Ajax级联操作 简练清晰 容易理解 完全可以拷贝引用
JavaDB+JSP+AJAX实现的级联下拉菜单
InfoPath2010+SharePoint无代码实现下拉列表框级联
select级联下拉列表 JS实多级联动下拉菜单类,简单实现省市区联动菜单! 无刷新级联下拉框的jquery代码 jQuery+HTML5实现的带链接箭头的多级下拉菜单