您的位置：首页 > Web前端 > JavaScript

JSP实现三级菜单级联

2006-03-28 15:21 411 查看

曾经一度在为级联菜单而麻烦，花了好些功夫才做出来了，与大家一起分享，使用JavaScript结合Jsp从数据库读出的三级级联菜单，程序代码如下！


<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.sql.*"%>

<jsp:useBean id="con1" scope="page" class="com.Conn"/><--引用Bean-->
<jsp:useBean id="con2" scope="page" class="com.Conn"/>
<jsp:useBean id="con3" scope="page" class="com.Conn"/>
<jsp:useBean id="con4" scope="page" class="com.Conn"/>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>-------三级菜单级联-------</title>


<%
     ResultSet sub1 = null; //dept
     ResultSet sub2 = null; //member
     ResultSet sub3 = null; //member
ResultSet sub4 = null; //attribute
%>

<script language='javascript'>
//将三级列表中的人员属性清空
function removeop()
{
var long = document.input.ssub.options.length;
var oOption = document.createElement("OPTION");

for(var i=0;i<=long;i++)
     document.input.ssub.options.remove(i);
document.input.ssub.options.remove(0);
oOption.text="请选择人员属性";
oOption.value="0";
document.input.ssub.add(oOption);
}
</script>

<SCRIPT LANGUAGE="JavaScript">
var sSele = new Array;   //用于储存member表信息
var sSele1 = new Array; //用于储存attribute表信息

sSele[0] = 'Obj.add(Option("请选择部门人员","0"));';
sSele1[0] = 'Obj.add(Option("请选择人员属性","0"));';
<%

    int vid = 0;           //部门id
int subid = 0;        //人员id
int aid = 0;     //属性id
String vnum = "";      //部门名称
String subname = "";   //人员姓名
String aname = "";     //属性名称

  sub2 = con2.select("select * from dept");//将所有部门人员取出并根据部门id号存入sSele数组
while (sub2.next())
   {
  vid = sub2.getInt("id");
     vnum = sub2.getString("name");
  sub1=con1.select("select * from member where dept_id='"+vnum+"'");
%>
sSele[<%=vid%>]='Obj.add(Option("请选择人员","0"));';
<%
  while(sub1.next())
    {
      subid=sub1.getInt("member_id");
   subname=sub1.getString("member_name").trim();
%>
     sSele[<%=vid%>]=sSele[<%=vid%>]+'Obj.add(Option("<%=subname%>","<%=subid%>"));';
<%
     }
  sub1.close();
   }
sub2.close();

sub3 = con3.select("select * from member");//将所有人员属性取出并根据人员id号存入sSele1数组
while (sub3.next())
   {
  subid = sub3.getInt("id");
     subname = sub3.getString("truename");
  sub4=con4.select("select * from attribute where member_id="+subid);
%>
sSele1[<%=subid%>]='Obj.add(Option("请选择属性","0"));';
<%
  while(sub4.next())
    {
      aid=sub4.getInt("attribute_id");
   aname=sub4.getString("attribute_name").trim();
%>
     sSele1[<%=subid%>]=sSele1[<%=subid%>]+'Obj.add(Option("<%=aname%>","<%=aid%>"));';
<%
     }
  sub4.close();
   }
sub3.close();

%>
</SCRIPT>

<form name="input" method="post" action="#">
<table width="670" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#3366FF">

    <tr bgcolor="#ffffff">
    <td bgcolor="#C4DFFB">请选择科室：</td>
    <td bgcolor="#C4DFFB">
      <select size="1" name="dept" ONCHANGE="removeop();Obj=this.form.sub; Obj.innerHTML=''; eval(sSele[this.value]);">
        <option value="0">--请选择科室--</option>
                      <%
                            try{
                              ResultSet rst2 = con2.select("select id,name from dept");
                              while (rst2.next())
                                {
                               out.println("<option value = '"+rst2.getInt("id")+"'>" + rst2.getString("name") + "</option>");
                                 }
                              con2.close();
                               }catch(Exception e){out.println(e);}
                  %>
      </select>
</td>
</tr>
<tr bgcolor="#ffffff">
    <td bgcolor="#C4DFFB">请选择科室人员：</td>
    <td bgcolor="#C4DFFB">
      <select size="1" name="sub" ONCHANGE="Obj=this.form.ssub; Obj.innerHTML=''; eval(sSele1[this.value]);">
   <option value="0">请选择人员</option>
      </select>
   </td>
</tr>
<tr bgcolor="#ffffff">
    <td bgcolor="#C4DFFB">请选择人员属性：</td>
    <td bgcolor="#C4DFFB">
      <select size="1" name="ssub">
   <option value="0">请选择属性</option>
      </select>
   </td>
</tr>
</table>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsp javascript sql server templates class string

相关文章推荐

新的分享

章节导航