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