小妹用最简单的方法做一个二级联动下拉菜单,从数据库中取数作为选项。但是一级选项还能出来,选好一级选项后二级选项出不来。劳烦各位大虾帮我看看,谢谢了~~<%@ 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>
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>
解决方案 »
- 请教一个excel下载解包问题,古怪的很
- spring+dwr和spring+struts哪個好
- 求助:JavaBean的配置问题
- jsp里为什么无法使用useBean??
- 初学jsp,不知道怎么连接数据库。散分求学。哈哈。
- eclipse下编辑web.xml文件速度很慢
- 求计数器源码和在线人数源码 每个20分 先到先得
- Jsp连接SQL数据库的问题
- 如何处理Oracle数据中的CLOB类型的字段
- 使用dom4j保存xml内容失败
- 学struts2都要崩溃了,错误s:form tag declares that it accepts dynamic。。。求指点
- js eval 函数 如何进行指数计算
二级菜单就可以用两种方法实现,
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>