87,910
社区成员
发帖
与我相关
我的任务
分享【送分】一个简单的三级级联菜单问题 options对象
<script language="javascript">
var XMLHttpReq;//这个例子里面只用到一个XMLHttpRequest对象，用于获取服务端返回的XML序列
//创建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 sendRequest1(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse1;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse1() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateList1();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateList1() {
var username=XMLHttpReq.responseXML.getElementsByTagName("username");
var list = document.getElementsByTagName("*").f_username;
for(var i=0;i<country.length;i++){
list.add(new Option(username[i].firstChild.data,username[i].firstChild.data));
}
}
//发送请求函数
function sendRequest2(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse2;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse2() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateList2();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function updateList2() {
var userNO=XMLHttpReq.responseXML.getElementsByTagName("userNO");
var list = document.getElementsByTagName("*").f_userNO;
for(var i=0;i<city.length;i++){
list.add(new Option(userNO[i].firstChild.data,userNO[i].firstChild.data));
}
}
// 创建级联菜单函数
function showList1(obj) {
clearList1();
clearList2();
sendRequest1("org_menu.jsp?Depart="+obj);
}
function showList2(obj) {
clearList2();
sendRequest2("org_menu.jsp?username="+obj);
}
function clearList1()
{
var list = document.getElementsByTagName("*").f_username;
list.options.length=0;
list.add(new Option("---请选择---",""));
//f_username.length=0;
//f_username.add(new Option("---请选择---",""));
}
function clearList2()
{
var list = document.getElementsByTagName("*").f_userNO;
list.options.length=0;
list.add(new Option("---请选择---",""));
}
</script>
<th width="21%">
<select name="f_org" onChange="showList1(this.options[this.options.selectedIndex].value)">
<option value="" >-请选择机构-</option>
<%
for(int i=0;i<items1.size();i++)
{
out.println("<option value='"+items1.get(i)+"'>"+items1.get(i)+"</option>");
}
%>
</select>
</th>
<th width="14%">
<select name="f_username" onChange="showList2(this.options[this.options.selectedIndex].value)" >
<option value="" >-请选择成员-</option>
</select>
<select name="f_userNO" onChange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)">
<option value="">-请选择员工号-</option>
</select>
</th>
第一个框选择机构是之前有获得的一个list ，可以正常下拉
然则第一框选中后本来应该能引出第二个框内的在该机构的员工姓名，浏览器报红色这栏错误，’options‘ is null or not an object
对前台JS不熟，请不吝赐教
...全文
请发表友善的回复…
发表回复
vonreynard 2014-09-16
- 打赏
- 举报
好像网上有很多人用这个三级联动的ajax模板都说有问题，不过我主要是想知道这个有问题在哪里
vonreynard 2014-09-16
- 打赏
- 举报
<%@ page contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*,public_v.* " %>
<%
String Depart=request.getParameter("Depart");
String username = request.getParameter("username");
Statement st = null;
ResultSet rs = null;
List usernamelist = new ArrayList();
List userNOlist = new ArrayList();
try{
Class.forName(driver);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
try {
Connection conn = DBManager.connToDB();
st=conn.createStatement();
if(username != null)
{
rs=st.executeQuery("SELECT f_xm FROM t_yg where f_jg='"+CThanding.CurrScode(Depart)+"'");
while (rs.next())
{
usernamelist.add(rs.getString(1));
}
}
if(userNO != null)
{
rs=st.executeQuery("SELECT f_ygh FROM t_yg where f_xm='"+username+"'");
while (rs.next())
{
userNOlist.add(rs.getString(1));
}
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
for(int i=0;i<usernamelist.size();i++)
{
out.println("<username>" + usernamelist.get(i).toString() + "</username>");
}
for(int i=0;i<userNOlist.size();i++)
{
out.println("<userNO>" + userNOlist.get(i).toString() + "</userNO>");
}
out.println("</response>");
out.close();
%>vonreynard 2014-09-16
- 打赏
- 举报
这个是到action文件内
取xml生成文件的结果。我贴出来
[code=javascript<%@ page contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*,public_v.* " %>
<%
String Depart=request.getParameter("Depart");
String username = request.getParameter("username");
Statement st = null;
ResultSet rs = null;
List usernamelist = new ArrayList();
List userNOlist = new ArrayList();
try{
Class.forName(driver);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
try {
Connection conn = DBManager.connToDB();
st=conn.createStatement();
if(username != null)
{
rs=st.executeQuery("SELECT f_xm FROM t_yg where f_jg='"+CThanding.CurrScode(Depart)+"'");
while (rs.next())
{
usernamelist.add(rs.getString(1));
}
}
if(userNO != null)
{
rs=st.executeQuery("SELECT f_ygh FROM t_yg where f_xm='"+username+"'");
while (rs.next())
{
userNOlist.add(rs.getString(1));
}
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
for(int i=0;i<usernamelist.size();i++)
{
out.println("<username>" + usernamelist.get(i).toString() + "</username>");
}
for(int i=0;i<userNOlist.size();i++)
{
out.println("<userNO>" + userNOlist.get(i).toString() + "</userNO>");
}
out.println("</response>");
out.close();
%>][/code]
熏肉大饼 2014-09-15
- 打赏
- 举报
function updateList1() {
var username=XMLHttpReq.responseXML.getElementsByTagName("f_username"); //加上f_
var list = document.getElementsByTagName("*").f_username;
for(var i=0;i<country.length;i++){
list.add(new Option(username[i].firstChild.data,username[i].firstChild.data)); }
function updateList2() {
var userNO=XMLHttpReq.responseXML.getElementsByTagName("f_userNO"); //加上f_
var list = document.getElementsByTagName("*").f_userNO;
for(var i=0;i<city.length;i++){
list.add(new Option(userNO[i].firstChild.data,userNO[i].firstChild.data)); }
