jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312", L) i$ w( i0 b
%>& K$ {2 ^" ]) c+ ]
<style>- N6 J: G: x7 ^6 q0 D" G( \$ \
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }% a" @4 U3 L- D! t2 j
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;" W: n# i% J' v: S$ N( \" P- E7 [( a
  border-bottom: solid 1px #4e7dc1;' e: h$ i9 H4 P+ l
  border-left: solid 1px #aecaf9;' D+ Y9 _' g! w' c7 ?4 F
  border-right: solid 1px #5679bd;
  padding:1px;% w# j1 i) s( R* B# g: ]* A
  margin:0px;}* }3 E7 a# |: x8 Y  m/ k2 q
</style>
<script language="javascript"># j# h0 }: \$ T
* Z- t+ T' M7 S4 l& ^
</script>
+ j! d8 p' _; r+ U  g<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">! \, h! V: b  d% K7 j5 @! L7 r
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />( d" u; f" Y, Q9 L
<%
; P9 z/ a* g7 b% ], I8 A9 j' z7 `- X  cdatasource ds=new cdatasource();  //数据联结bean实例
; M% P' `# [, f  java.sql.connection conn=ds.getconnection();
6 d* j. x; E1 E3 w2 V0 K- C5 n; x6 i  java.sql.statement stmt=null;
  |0 W2 q9 R% u  o( X/ `! B  java.sql.resultset rs=null;
# ^4 P4 G" x6 r4 F# q1 _9 b  cdatacheck dc=new cdatacheck();& K2 B3 g* n9 G
%>
  \, p- c4 k) Q3 H<%
2 d# @5 H$ _3 [6 z  D0 pstring 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";
1 E3 u. e/ x2 r* u" N+ U( mstmt=conn.createstatement();  d" k# Q  o3 t3 M4 s  g
rs=stmt.executequery(sqlu);
1 i. Z! z0 ?) i4 n" ?: u%>
7 `8 H2 Z7 {' l* b) D9 s<script language='javascript'>! U& E+ L( r9 S& C
arr = new array();
/ A& f" p$ K% \6 a<%  int temp=0;
1 W3 i$ Q' f+ u- Ewhile(rs.next())- B. ]2 a; I5 Z& |- I
{+ R, v) x) j5 w
%>
3 r5 T% C: X; i3 N! I0 a0 _arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
) g) d2 v; n; d* d+ c0 s# J<%
+ \+ V" q8 H! M: |8 ]( u0 V5 S$ Wtemp = temp + 1;
, c. }8 z4 J) U7 ?$ o7 J}& ^2 \) |) G3 S, L  d; w
%>
. n3 G9 ~! ~( U2 f! ~- ^temp=<%=temp%>;
: \8 z$ w5 b" a* N* bfunction changelocation(id){ " d/ p8 K# C! C$ R0 m
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 * c1 w0 V9 d8 X# U% Y# d
var i = 0; : T6 K6 e! ~3 v8 t  `, ^" n. ?
document.combo_box.city.options[0]=new option('-------','');
$ y; ]) K& B& I- ^% h, ~, Q0 _3 h  `for(i=0;i<temp;i++){
9 v: k! _1 s+ i  B. {( g: ~' mif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] * E+ ^7 W" U" |8 f; e& M
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
7 m2 |: Y0 ~: Z. n  U2 V}
& }& I$ X6 h; S1 Y}
( ]# Y& e# ]2 t. ]} ) [! D$ e' m4 a7 h; T
</script>5 j/ g2 W' W5 J, a9 E

# O9 ]% }! q0 a% N. B$ o<form name="combo_box">
( S* u( P# G! m5 W7 a6 ?<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">5 j. o) Q& ?3 A5 _: |- \
  <tr height="24">' K3 e8 J: L7 ^- ~8 d
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>% i2 x7 `$ h6 R5 W8 A5 S4 W. |' L) R
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>' j4 G* G# H$ u: Q6 K
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
% s% G: r/ N+ |3 |0 F <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>) q9 t$ k) o- x" L4 r  n
  </tr>
, ?5 i3 `" J+ e0 i  n; d  a, h  <tr>
+ W/ b! }  U$ d( G2 L! y) } <td>* x. O5 C/ L* Z( u0 G( \( s
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
. S/ Z/ q: Y: Q: I  <option value="0">请选择部门 ---></option>
3 p1 y, F" g$ Z1 a0 ]  J<%
; T4 o+ h3 s; v string sqld="select * from tdept";+ X1 `9 u5 v4 G
stmt=conn.createstatement();
+ y2 Y9 }3 n  @* \! l1 Vrs=stmt.executequery(sqld);* Z+ u+ Y5 I( l! D+ B
while(rs.next())2 }# m( A2 G' w" B
{  {5 L7 j6 ^! z8 L
%>7 _( B, `% p2 x9 u6 t/ d
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>1 ~; l4 m" F7 ?
<%
. M9 y3 f1 g& X! N}
% u9 H" e3 w! l6 W* F%> - D9 L, @3 \: }4 [, G. f9 i' h8 z
  </select>
( p5 x* }; h/ V</td>
' m0 B( ?2 U+ z <td>+ d: Q& `% `% m1 k5 E1 ]
  <select multiple id=city style="width:150;height:200" class="bgc">& |6 I; W8 G# w; m% ~
  </select>& w( b- @6 i: K9 T
</td>
+ H9 a+ F7 W; H5 ~5 U8 O <td nowrap align="center" class="bgc">  |1 o3 f6 W1 h$ V( r
  <input type="button"  value="<<" class="buttons">
& T! b1 M+ R9 W) g  <input type="button"  value=">>" class="buttons">
& ?7 d/ M  R. h  B</td>
4 B  O  x2 K, r* y <td>
4 ~- ~, l  e3 J; o6 i+ {  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
% Y- Y& N" P2 S( u  </select>4 i: w# o/ `* m$ s8 `
</td>
. x! o+ O! X1 ]  </tr>* Z/ q$ @, y: a9 c6 j( @
<tr class="bgc"> 0 a9 o" [7 g9 }5 H( f
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
5 K. ^1 r  `0 S( o0 W3 x  </tr>: m! X. H- V$ Z2 l: k# `$ a
</table>
- p2 t/ A: j* C+ B$ T: Q9 h& S5 g</form>
6 e; @5 J* m5 u<script language="javascript">
4 |$ ^: L/ b5 @- U: k7 }//人名移动
! i' V& d5 |$ j$ l' ifunction move(fbox, tbox) {
2 {5 O- u$ E  u+ Avar arrfbox = new array();& N1 E, e, L0 |( M7 n; o: m
var arrtbox = new array();9 Q  U0 P  ^: a. R+ L0 s" j
var arrlookup = new array();/ Z- f, I# Y8 n- i2 J
var i;" O- f* ^) m5 i. m
for (i = 0; i < tbox.options.length; i++) {9 s  d$ ]' A, q$ j( x7 J9 g
arrlookup[tbox.options.text] = tbox.options.value;1 j' I6 H: f- r
arrtbox = tbox.options.text;$ K; O+ Y' m) _  Y8 W) Z, S
}1 d" I( o/ o  f1 \. q( O
var flength = 0;% O& Z  D7 Z1 b) Q3 `
var tlength = arrtbox.length;0 u  A6 ?  k4 t
for(i = 0; i < fbox.options.length; i++) {
. q! ]- U$ B' J( {- S) a. uarrlookup[fbox.options.text] = fbox.options.value;
% Z4 M! {4 A5 U/ V* Yif (fbox.options.selected && fbox.options.value != "") {7 n3 A. N; {" n. J5 J: N  P1 q
arrtbox[tlength] = fbox.options.text;3 V' A- s+ a3 W
tlength++;( q* h6 f4 q7 x6 D! m1 C% \
}
" g% r6 }/ n6 H* U4 g+ }" Gelse {; e/ h! u, D1 d4 W
arrfbox[flength] = fbox.options.text;0 k7 d) p2 ^2 z; Z1 `' [9 n* @) U) K  G
flength++;
: p: w/ a8 G: b9 W) B9 z! q }0 d7 D/ Z, B1 m2 W/ H8 ?  v
}
  v$ s/ Z- y1 X) ~# Parrfbox.sort();$ P: I4 {2 z6 Y8 J( d1 }  V* g
arrtbox.sort();
8 Q9 X6 Y- I* Z+ H$ ?0 C, r* o4 e" g- M5 S
fbox.length = 0;" n6 j( X# l3 u2 Y4 I( l- c
tbox.length = 0;
/ g4 G2 N, K( Z% j* m3 @; M% {var c;
9 ?( H7 r  f0 tfor(c = 0; c < arrfbox.length; c++) {
! B& U; g& d/ mvar no = new option();
3 R6 }0 H7 L! pno.value = arrlookup[arrfbox[c]];3 n: _# g5 P" h8 \
no.text = arrfbox[c];
  t2 M* l1 j# J- k$ E9 dfbox[c] = no;
1 ~3 Z1 t. x" i}
* B3 d" U' V4 ?$ L# y4 cfor(c = 0; c < arrtbox.length; c++) {
; {  @" I# K; d5 V' w3 @/ z3 qvar no = new option();
5 q( e2 m8 G+ B% C- o$ `8 yno.value = arrlookup[arrtbox[c]];
  J# O+ S# V+ l! z- }6 Dno.text = arrtbox[c];3 ?6 R8 ]+ o5 S7 @' \5 R8 i
tbox[c] = no;* u& [/ x  M2 k+ Y. n. q# H% z
}
( @3 p  _1 y0 E# U( _}
6 W- a5 F# S" T</script>* q% E6 X2 E* h; V$ |, ~4 n
</body>0 U( Z% h( J+ c7 V" L

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

返回列表

jsp+javascript打造级连菜单

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

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