日期:2014-05-16 浏览次数:20465 次
做了这么久了还没弄过动态级联下拉列表框,所以决定也整一个。
例子为:学校、班级、学生,三级下拉列表框,具体代码随后贴出。
得出的结论是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);
}
func