实现动态下拉框
在开发项目中，经常会遇到大小类的问题，即有两个下拉框,一个为主,一个为次,如果主下拉框选择更新后根据所选择的项从数据库中读取相关数据并更新到次下拉框中.比如主下拉框为大类,次下拉框为大类下的选项,并且页面是没有提交的。
思路是在打开页面时就要所有的大类和小类都从数据库中取出，把所有的小类组装成一个javascript小类数组(数组结构为 Array("大类编号","小类编号","小类名称"))，当大类改变时，激活一个javascript函数从小类数组中取出从属于选中大类的所有小类，把其在小类下拉框显示即可。
下面我介绍其具体做法:
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.sql.*,gbase.db.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<HTML>
<HEAD>
<TITLE>北天JAVA技术网</TITLE>
<LINK href="css/css.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<DIV align=center>
<CENTER>
<form name="main" method="post" action="article_save.jsp">
<TABLE id=AutoNumber1
borderColor=#c0c0c0 cellPadding=0 width=760 border=1>
<TBODY>
<TR>
<TD align=middle width=750 bgColor=#f2f2f2 colSpan=2>
</TD>
</TR>
<TR>
<TD align=middle width=68>大 类</TD>
<TD width=682> <select name="maintype" onChange="javaScript:changemaintype(document.main.maintype.options[document.main.maintype.selectedIndex].value);">
<!--下面的下拉框数据可以自己改成从数据库读出的-->
<option value="">--请选择--</option>
<option value="1">JAVA技术</option>
<option value="2">设计研究</option>
<option value="3">数据库技术</option>
<option value="4">项目开发</option>
<option value="5">最新技术</option>
</select>
</TD></TR>
<script language = "JavaScript">
var subcat1 = new Array();
<!--下面的数组数据可以自己改成从数据库读出的,格式为Array("大类编号","小类编号","小类名称"),如
int iCount = 0;
<%while(rs.next()){%>
subcat1[<%=iCount%>] = new Array("<%=rs.getString("bigtypeid")%>","<%=rs.getString("smalltypeid")%>","<%=rs.getString("smalltypemc")%>");
iCount++;
<%}%>
var js_count=iCount;
-->
subcat1[0] = new Array("1","1","jsp与servlet技术");
subcat1[1] = new Array("1","2","javascript技术");
subcat1[2] = new Array("1","4","javabean技术");
subcat1[3] = new Array("1","5","EJB技术");
subcat1[4] = new Array("1","6","web service技术");
subcat1[5] = new Array("1","7","应用服务器技术");
subcat1[6] = new Array("1","9","JAVA综合知识");
subcat1[7] = new Array("2","1","设计模式");
subcat1[8] = new Array("2","2","设计架构");
subcat1[9] = new Array("2","4","设计综合知识");
subcat1[10] = new Array("3","1","MYSQL");
subcat1[11] = new Array("3","2","SQL Server");
subcat1[12] = new Array("3","3","Sybase");
subcat1[13] = new Array("3","4","Oracle");
subcat1[14] = new Array("3","5","DB2");
subcat1[15] = new Array("3","6","数据库综合知识");
subcat1[16] = new Array("4","1","项目开发");
subcat1[17] = new Array("5","1","最新技术");
var js_count=18;
function changemaintype(locationid)
{
document.main.detailtype.options[0] = new Option("--请选择--", "");
document.main.detailtype.length = 1;
var locationid=locationid;
var ii;
for (ii=0;ii < js_count; ii++)
{
if ((subcat1[ii][0] == locationid))
{
document.main.detailtype.options[document.main.detailtype.length] = new Option(subcat1[ii][2], subcat1[ii][1]);
}
}
//alert(locationid);
}
</script>
<TR>
<TD align=middle width=68>小 类</TD>
<TD width=682> <select name="detailtype">
<option value="">--请先选择大类--</option>
</select>
</TD></TR>
</TBODY></TABLE>
</BODY>
posted on 2011-12-05 15:45 peggy89321 阅读(349) 评论(0) 编辑 收藏 举报
