jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"  F8 I& R& s! {% V" v
      c pageencoding="gb2312"
%>
<style>% A( p. L1 @# w9 X
.f9{ font-size:9pt; }+ Y* L: X$ V8 D: J# G
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;* _9 o5 s8 C& f% z1 Y
  border-right: solid 1px #5679bd;1 ^* @; ]7 n* c
  padding:1px;* d) t/ |) S- ~. H
  margin:0px;}% @. `! u0 n4 u8 d# R; N
</style># T( r3 f  y7 k4 A
<script language="javascript">3 T3 }4 |/ k& a2 ^0 G% w
3 ^) I/ @4 e7 q$ Z( d, R
</script>
# e. C' s; K2 A6 K; u<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
0 S  D( J  B" @8 ]7 Z9 X  R7 L" K<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
/ C; u8 \0 i' W0 T<%! l5 o6 f( q  z$ E- ]  r+ Q
  cdatasource ds=new cdatasource();  //数据联结bean实例
- y/ n0 L$ E/ ]; O  java.sql.connection conn=ds.getconnection();$ H* I% \, r6 g% |0 J
  java.sql.statement stmt=null;
% `+ W% n' ?) R$ Y+ _0 K2 z9 h) K8 m  java.sql.resultset rs=null;
8 y. W. N; U2 ^! q  cdatacheck dc=new cdatacheck();
" D: p, W  e. Z5 s  ]%>! k# \7 `" V% o% I* b* [+ q
<%
string sqlu="select t1.fno, t1.fname, t2.fname as fdept from tuser t1 left outer join tdept t2 on t1.fdept = t2.fno order by t2.fname";
) |: \9 N- ^, V8 q  gstmt=conn.createstatement();
4 _- [" D5 B9 B  \# e" @rs=stmt.executequery(sqlu);
  o/ K  E. e  k1 s0 Z' a* F%>
! ^- Y$ Z6 s3 ?7 x* {6 S! W; r! r<script language='javascript'>
1 H* c, J6 _6 U8 n7 narr = new array();5 y& ?8 ]. m$ N" A
<%  int temp=0;, g" j. c  _, f- s9 ~8 b
while(rs.next()), c4 o) P% H  C5 r' `1 r: W
{
" g  U/ g' y! v* E2 a%>
; d) {3 v% a" |3 E% q- Narr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");8 j# t) U; [0 `! Q3 U
<%9 C7 X1 {$ O- _# o: A3 ~
temp = temp + 1;- z9 i+ g! z, X. Y
}" C" G2 M; a3 u; u$ \5 |
%>' |# F: w; U. ~, }4 W- T2 M
temp=<%=temp%>;! J/ B- d( J8 L7 \; l
function changelocation(id){
1 N( W$ J$ }" V- p0 {) V" bdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
( p7 n# Y; |* y# V# _var i = 0;
7 F$ V$ Q& s9 E" F6 i2 Tdocument.combo_box.city.options[0]=new option('-------',''); 5 ?" C( y0 G+ g% L3 `
for(i=0;i<temp;i++){ ( E; ]* F3 {7 S" y+ D) y
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ) P( b3 G% q( b( ]
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 9 Y: H1 |0 u  e
} + B5 s" K& M" e1 r  e3 H
} , x( Z# X  s8 L3 e# E4 M: Z
} ! F7 u# n2 V) w- a% W. T; o8 r
</script>$ C* t  X1 y4 ?/ G1 _8 M

. O' D- [# {* U# Q3 d; U& P9 [+ c<form name="combo_box">/ I0 M! j$ E( L3 m! L
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">3 H. [' X% u3 {1 y! N; R; S
  <tr height="24">
  w+ H# w! \2 j  Z8 R <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>* P2 O2 c$ y" K0 U) \$ E/ ~
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>+ d+ ~7 c! g7 L; S" B# d
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>' r" q' h' F) ]* A( n  }6 Y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
6 b7 `; h% [2 M1 A. {& u  </tr>: _+ P; e( |% O3 Q
  <tr>
9 |1 S) s- @- m! T8 f <td>
# {* [: F. l! |, F6 f: D$ C  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
8 [' r) p+ }: v5 }: p5 i  J  <option value="0">请选择部门 ---></option>; x; w* K6 C* o" \6 {
<%9 o- q  R& @' x$ {
string sqld="select * from tdept";4 F: k; I9 B$ V2 B
stmt=conn.createstatement();
( A7 L! i8 t# I. K; hrs=stmt.executequery(sqld);
$ `& H, S" I4 K5 t) i$ l' U! u3 B! Ewhile(rs.next())
* C8 R0 T0 A+ n+ _, G% \" ~{3 s/ f, S* ~1 y5 ], V
%>; W+ L; i/ ^* x. k7 v1 K! I  X
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>; w$ K6 @7 ?0 f# V% w
<%
; p# K  i# N/ x& y) O}
" a; _/ [+ x: w* C! e! D" v%>
- a2 p& a) M8 o) a  </select>" }4 c5 T; m, t: l
</td>
8 f2 \+ @. G  F" e4 `- s <td>
+ A0 u8 Y8 n* ]4 p% T3 n6 E  <select multiple id=city style="width:150;height:200" class="bgc">
4 ?/ s, p% l  ]) P$ l' L$ D  </select>
# M& g) k% i9 c$ D9 K</td>5 @  {( R9 q: Y" ?) s! D2 T! Q
<td nowrap align="center" class="bgc">
- Q! _5 G& g! e3 V/ R' E  <input type="button"  value="<<" class="buttons">5 Z6 q: y0 v8 d2 [
  <input type="button"  value=">>" class="buttons">: P5 i0 J# w; m! {
</td>
0 V; p/ L6 j& s; l <td>
3 l& Q' X+ M; J( M  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
( x( S8 C- ]! j, h; N4 `5 m  </select>
2 L$ D. V+ j( T( _. [. t</td>
% S. U0 `0 X& K: w+ b  </tr>7 Q- ]6 c  i6 z. i
<tr class="bgc"> 0 E; g% v7 z- x( b8 P) K
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
  </tr>9 G8 ]3 p  `& B+ M
</table>. K  n. z4 D$ R$ K3 t) J
</form>' o: R! n+ A2 H0 s0 o
<script language="javascript">
- V* k  i, r! b( {. M//人名移动9 |" H5 v5 E) T2 e' t
function move(fbox, tbox) {* A  m- ]9 K$ w8 I
var arrfbox = new array();
+ x6 J* \+ T& D5 b+ @& e5 @; Uvar arrtbox = new array();# d" W1 U( ~6 x2 m, f% S
var arrlookup = new array();; [1 O/ X8 w5 H2 w6 U3 L
var i;
2 [3 p9 T2 g" H8 ^) W! M- Gfor (i = 0; i < tbox.options.length; i++) {
. W* a% n, \* m/ [- Oarrlookup[tbox.options.text] = tbox.options.value;6 b2 T% E# H$ }8 W8 i( Y. \" d
arrtbox = tbox.options.text;
. p. B& A4 S1 w& I& B6 D) @}+ S5 t7 x* T$ K  C8 M; t
var flength = 0;
' \2 ?0 `. v" S8 z& c0 G: Pvar tlength = arrtbox.length;) U7 N( `& I7 ]+ Y
for(i = 0; i < fbox.options.length; i++) {
9 ?: R5 c* `& M! ]! }: v) }4 z" Varrlookup[fbox.options.text] = fbox.options.value;5 ~2 Q0 {- [2 B2 w: Z0 g& ~
if (fbox.options.selected && fbox.options.value != "") {
* c$ |3 h% l3 R8 P# I  d0 x- Darrtbox[tlength] = fbox.options.text;1 }6 x0 ^% W2 V; z
tlength++;
& \$ o- {9 H& i) E}5 [& c' W6 J4 N! J
else {! @  s6 ?8 M$ ?" O# f
arrfbox[flength] = fbox.options.text;' G* k* z* s7 f4 r! B
flength++;7 _$ L( s, @9 N3 k' c
}
; |* I" i# V+ Y}
8 @2 V6 e# z9 j1 G+ q: k& M4 Narrfbox.sort();
6 M, C; R  Z% C7 w. }arrtbox.sort();5 q9 N- J+ D( r) @0 T6 t/ K
% h/ I' C9 t0 w' b8 [! E
fbox.length = 0;
8 w6 q% O* B8 Y& F- X, Ztbox.length = 0;
2 ?( I! L( Y. `; L3 Avar c;/ [( e; C! c- x
for(c = 0; c < arrfbox.length; c++) {
5 E; F  Q" W& E+ j2 {var no = new option();
7 w7 l: _, G3 k1 |( X7 l& [2 uno.value = arrlookup[arrfbox[c]];- `& R+ R2 y6 L$ \2 ~' n4 o. ]
no.text = arrfbox[c];
# K6 U  `! }9 b& q! o) c, v/ jfbox[c] = no;& g2 r1 W  g. M7 i6 g; {$ A% o- S
}
; u* A0 N. J9 Q# a- a+ y- Ofor(c = 0; c < arrtbox.length; c++) {
3 ]! ?3 P* k0 i; {var no = new option();5 B6 S( a* \5 g) v
no.value = arrlookup[arrtbox[c]];
3 m- c, s8 @" p4 Dno.text = arrtbox[c];- l( l4 A' H6 }
tbox[c] = no;' b% B2 a& B2 t0 F: _1 |) B" p+ a
}$ B9 f& M* N8 L8 b4 }: J
}
: f& o# y  K0 R3 h  ^</script>
$ k5 [/ P8 G. M, a1 E( X</body>* v$ y6 y' Q( s. F- R, k

捌玖网络 89w.org----致力于站长学习交流

返回列表

jsp+javascript打造级连菜单

[收藏此主题] [关注此主题的新回复]

[通过 QQ、MSN 分享给朋友]