jsp做一个二级下拉菜单，有问题了~~
小妹用最简单的方法做一个二级联动下拉菜单，从数据库中取数作为选项。但是一级选项还能出来，选好一级选项后二级选项出不来。劳烦各位大虾帮我看看，谢谢了~~
- Java code
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8" session="true"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head><% String SqlQuery="SELECT * FROM binary_system"; Class.forName("com.mysql.jdbc.Driver").newInstance(); Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/zhengshi","root","zky"); Statement sql=conn.createStatement(); ResultSet rs=sql.executeQuery(SqlQuery);%><script type="text/javascript"> var onecount; onecount=0; subcat = new Array(); <% int count = 0; while(rs.next()){ %> subcat[<%=count%>] = new Array("<%=rs.getString("element1")%>","<%=rs.getString("element2")%>","<%=rs.getString("phase")%>"); <% count++; } rs.close(); %> onecount=<%=count%>; function select1(locationid) { document.myform.erji.length = 0; var i; for (i=0;i < onecount; i++) { if (subcat[i][0].equals(locationid)) { document.myform.erji.options[document.myform.erji.length] = new Option(subcat[i][1]); } } } </script> <body> <form name="myform" method="post"> 元素1： <select id="yiji" name="yiji" onchange="select1(document.myform.yiji.options[document.myform.yiji.selectedIndex].text);"> <OPTION selected value>==请选一级元素==</OPTION> <% Statement sql2=conn.createStatement(); ResultSet rs2=sql.executeQuery(SqlQuery); while(rs2.next()){ %> <option value=<%=rs2.getString("element1")%>><%=rs2.getString("element1")%></option> <% } %> </select> 元素2：<select id="erji" name="erji" > <OPTION selected value>==请选二级元素==</OPTION> </select> <input type="submit" value="提交"></form> </body></html>[解决办法]
一级菜单没得说，直接数据库读取
二级菜单就可以用两种方法实现，
1、先预读出所有二级选项及对应一级选项的classname，待选择一级菜单后利用js更换二级菜单的选项
2、选择一级菜单后，再从数据库读取二级菜单选项，更新到二级菜单，可以隐含一个页面作为刷新，这种办法比较繁琐些
<script language=javascript>
//最先从数据库读取所有选项值
//allSel数组形如：((北京，中关村，国贸，天安门，....),(上海，黄埔，....).....)
//(北京，中关村，国贸，天安门，....)---->第一个为一级选项，后面为二级选项
var allSel=new Array();//储存所有一级、二级选项，定义成全局变量
var tmpSel=new Array();//临时选项 allSel.add(tmpSel) allSel 是数组的数组，即二维数组
<%
dim bNew
rs.open "select * from big,small where big.bigclassName=small.bigclassname order by big.bigclassname",1,3,conn
bNew=rs("big.bigclassname")
response.write "tmpSel=new Array();"
response.write "tmpSel.add('" & rs("big.bigclassname") & "');"
do while not rs.eof
if bNew<>rs("big.bigclassname") then '新城市
response.write "allSel.add(tmpSel);"
response.write "tmpSel=new Array();"
response.write "tmpSel.add(" & rs("big.bigclassname") & ")"
end if
rsponse.write "tmpSel.add('" & rs("small.smallclassname") & "');" ‘加入二级菜单
rs.movenext
loop
rs.close
%>
</script>
一级菜单：<select id=bigsel onchange=sel_chg(this)>
<%
rs.open "select * from big",conn,1,3
do while not rs.eof
response.write "<option value=" & rs("id") & ">" & rs("bigclassname") & "</option>"
rs.movenext
loop
rs.close
%>
</select>
二级菜单<select id=ssel><option value=-1>请选择...</option></select>
js实现更新二级菜单
<script language=javascript>
function chgOption(op_arr){ //根据参数修改下拉菜单选项
var vOptions,iii;
var obj=document.all.ssel; //二级菜单obj
for(iii=0;iii<obj.length-1;iii++)obj.options.remove(0);//移除原二级菜单选项
for(iii=1;iii<op_arr.length;i++) { //iii=1
vOptions=document.createElement("option");
vOptions.value=iii;
vOptions.text=op_arr[iii];
obj.options.add(vOptions);
}
}
function sel_chg(obj){ //一级菜单选择后发起替换二级菜单
//获知是哪个选项被选中
var selIdx=obj.selectedIndex;
//根据之前的allSel替换二级菜单
chgOption(allSel[selIdx]);//注意这里调用allSel[selIdx]
}
</script>
正在上班 lz参考下吧 我原先做也是参考这个的
[解决办法]
不匹配应该搞错的。。。 那你进行类型转换后能行么？
[解决办法]
建议用jqury.ajax
[解决办法]
ajaX比较容易吧. ..省事
如果把所有的都拿出来就需要手动的配一下.