捌玖网络工作室 - Powered by Discuz! Board

标题: jsp+javascript打造级连菜单 [打印本页]

作者: admin 时间: 2007-12-5 17:43 标题: jsp+javascript打造级连菜单

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"/ ~: ~* r+ o, F! L4 ]2 C
      c pageencoding="gb2312"% a7 K; I" y9 a9 m* P
%>) l) }6 l" h6 n* i! m" f4 N2 Z
<style>& \7 K2 ?. V- {
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }* ?3 o( D; ?7 O& F
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;4 l' n& e2 V9 |' n. A3 O
  border-bottom: solid 1px #4e7dc1;/ U4 W2 ^5 X# K' V( I2 [4 q* g
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;8 u) I8 \% b2 n$ H) a
  padding:1px;" x. R* q' F9 t) h) `
  margin:0px;}
</style>; b8 n* y. O9 h- a0 _: ~8 u9 R
<script language="javascript">

0 E, ~" O' j$ l</script>+ U/ w- k  ~1 n$ N% s
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 ?+ ]9 k5 R5 K! p7 o<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />9 Z! }- f8 y: U- ]5 Q5 @; `8 W
<%
2 L( m- H# G: f$ B0 y- w  cdatasource ds=new cdatasource();  //数据联结bean实例
0 P' m& [5 }2 j* l4 _  java.sql.connection conn=ds.getconnection();
! P: ]  |& _4 E& N  java.sql.statement stmt=null;+ Y  C- ?: }' J5 s+ Z
  java.sql.resultset rs=null;
  K% F! L; m% e- p- f  cdatacheck dc=new cdatacheck();
+ ~) b+ r8 F& N# Q" z- p: q%>) i) D0 z* x" }3 `; L4 ]
<%5 h& @0 b! O1 u0 ~" L
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";
7 v4 q) T; b* o( j7 B3 Ostmt=conn.createstatement();
: H* J1 i: N6 @- j4 k! M! Nrs=stmt.executequery(sqlu);3 ~& x- Y+ \' j" Y
%>
# k6 e. w& ~  J% g" Q<script language='javascript'>* t) q, |/ n; V! [: v
arr = new array();5 _  e# t( E' D: ~' f2 v+ \
<%  int temp=0;0 }4 U+ i9 r- g1 D0 U8 C" }4 I
while(rs.next())0 J$ `# w3 j1 k
{/ o* Q, @0 G3 D! S- [. p
%>9 H) U! R1 D/ O5 o1 \
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");% M/ ]6 i% }* X* q' U! m' ]$ I
<%
' Y- e! K0 ~; B( l, Otemp = temp + 1;& G3 w' Z0 v+ T0 _5 v# _
}. L6 z& R# r  b
%>* f* H8 w- a8 i: d4 D
temp=<%=temp%>;
! ?8 z3 Q9 v7 N/ T& Ufunction changelocation(id){ 9 r) h6 [+ L( d; u
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 # o4 `4 f% \4 P/ b
var i = 0;
# I3 `, B' b5 [/ zdocument.combo_box.city.options[0]=new option('-------',''); 5 P' I4 @6 D; R  k
for(i=0;i<temp;i++){ 3 v* a8 w, @' e. E2 x
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
9 I) T# Y- p6 W1 E0 @document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); - a% i) L0 d) |9 n" s
}
+ g& q' D  V8 i! }+ h}
  e  r+ s& e" r1 x4 T8 n}
% {' x- k, Q% ^</script>0 @1 }7 f" z5 m9 ]  L; m
4 |) ?. Z; Q. D5 _% |# {3 d5 k$ w
<form name="combo_box">
, F# L& b4 [5 B+ g7 B' r( e* P/ P<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
9 s: u$ @/ {( R& P5 O  <tr height="24">
) i/ z! V; l0 U  v) T  | <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>7 ?1 u# T; ?$ z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>* L( a6 \) c0 g" Q: s+ w+ @. K" L
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>* V: T. I3 _: L4 w% R) {
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
* ~% K5 w9 L% w6 J0 [, k  </tr>
, P0 i% I$ I- ~7 U) W) I5 j4 b  <tr>   }' A2 C. Y* r/ ^6 L
<td>9 ?3 J% o1 s1 V" {3 Y3 B4 I- U( Z
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
: p( _% e/ z3 Q5 a7 B  <option value="0">请选择部门 ---></option>
" d' s& `- d$ K+ |, E  i3 M<%
. M* N0 I) o8 R string sqld="select * from tdept";" p; j+ G( l' S$ }# u5 @: B/ J
stmt=conn.createstatement();! r; o) y. U' V9 a
rs=stmt.executequery(sqld);* [" @$ J* H) Q; @* b/ R
while(rs.next())
! u5 _6 v7 ~2 |7 `* ?% a* {{
7 n" x& v7 s: Z) s6 g/ \6 `%>
" M$ R. K, E! i$ d1 u; U  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>- J- x0 n" {8 Y! a5 u- v' _( ^* F" [
<%
) `# a+ @" ~& G: p8 s' w* }) D! r}
2 w5 ]# M/ ~" r. ~%> 3 v& m) {. Z5 A+ x8 ^" n' `2 t4 b
  </select>+ E0 h/ N( d1 p# A6 y* a
</td>
( V. \! x3 y8 B: g- Q+ q6 ^% V% R <td>, S$ w" B' l9 [
  <select multiple id=city style="width:150;height:200" class="bgc">' d+ V: @" i' j. x& A
  </select>
0 C8 a+ n- ]- H' f2 }3 L# y</td>
: b. X0 U" m8 j/ t, m! E, v! ] <td nowrap align="center" class="bgc">
  w% o1 k/ J# R: d1 l  <input type="button"  value="<<" class="buttons">
9 Z" @2 n+ u; D; o: l  <input type="button"  value=">>" class="buttons">% Z/ L& F3 O* E: B  ]( d4 _
</td>
( {" g5 U* j( `; f+ V7 v: l <td>
6 O9 n2 `6 [# @% _# i  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
5 b. x$ |& ~# ^, M0 ]% e) d  </select>
; n5 z" u* e+ U$ F5 h' t# b8 S5 f9 g</td>
+ ]2 P  Y% B- M( F$ K  </tr>, `2 Y! D8 o. W5 u
<tr class="bgc"> 3 {3 v" O) g2 q& b. g
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>) }3 p6 s* U1 k9 {. c0 u4 I
  </tr>; n5 I# G$ S1 N6 e- G/ c" M4 }# q
</table>1 S- z, t- V0 n- B( ]
</form>: x' m8 Q4 T. w! r
<script language="javascript">3 O+ G' d' n, z0 Y- K2 J' |" r
//人名移动
8 V( q3 Y& h) L0 q; Z* y8 [* c" \function move(fbox, tbox) {
! a5 I* R9 y' Q$ V* l* t& J: wvar arrfbox = new array();
0 @6 \$ {+ ^. H$ I+ C+ jvar arrtbox = new array();+ B1 [( E7 Y  I4 m- G1 t7 n" _8 }$ d
var arrlookup = new array();5 q5 D' H+ ?: T; V' ?  ^4 h4 A
var i;  H2 \4 Y0 R# ^2 g
for (i = 0; i < tbox.options.length; i++) {
. K9 V; v5 ?* \arrlookup[tbox.options.text] = tbox.options.value;
8 q; Q" k2 }3 U$ J9 D% V1 Marrtbox = tbox.options.text;
9 a$ }$ c7 Y. B/ ]! p}
/ }: H- L/ b  k$ V9 Yvar flength = 0;( N9 U! Z: u& ?9 t/ [
var tlength = arrtbox.length;
1 M' S3 f) r, Rfor(i = 0; i < fbox.options.length; i++) {
" m7 U# H" P3 [+ e4 varrlookup[fbox.options.text] = fbox.options.value;$ v7 @  r/ e, G1 O9 S( N- q: ^, x
if (fbox.options.selected && fbox.options.value != "") {
6 q/ l8 m3 w8 M6 x# o; f" A# e. Varrtbox[tlength] = fbox.options.text;
: b% O0 g/ d3 c1 Y. K2 Ytlength++;% B# b2 z8 s# ^2 c: v
}
3 o* ]2 D; H: Delse {6 _4 B1 b" L4 R, R& X' f
arrfbox[flength] = fbox.options.text;5 r# z# p2 @9 D+ o# L; v
flength++;
; s! k3 H0 s: B4 c  l+ y }
" {# j0 ~# S  H4 B% B}" n/ ^( B& {3 ^9 _9 a
arrfbox.sort();% }3 P( D) W; q) R: u
arrtbox.sort();
% m9 t- _5 I4 t9 C7 @# ]/ d' z2 h! Q" C( A: S( I. F4 ]
fbox.length = 0;6 f9 n+ y! w/ h6 N+ q( d
tbox.length = 0;) ]* B- r& Z/ U8 w5 }
var c;
for(c = 0; c < arrfbox.length; c++) {
7 }" e2 `) ~; Y  o, Lvar no = new option();
4 k! P5 n) J. I  H/ b, R9 Zno.value = arrlookup[arrfbox[c]];4 Z; h* Q& C- Q' u% H' L
no.text = arrfbox[c];
; L- [% |5 A( r+ j  U% nfbox[c] = no;
$ t" m, Y0 E/ ?: b9 k# i}
9 ?4 |1 ~* s. _$ ?4 Rfor(c = 0; c < arrtbox.length; c++) {
- Y, l6 S0 `9 ]) s5 Mvar no = new option();5 L0 s3 I) z4 Z/ E8 Z
no.value = arrlookup[arrtbox[c]];
  @. r" l9 G" l5 t* nno.text = arrtbox[c];
8 a6 n% s1 S5 ?& j  K. Atbox[c] = no;
$ A' [. X3 T5 D! G0 k$ Z }/ ~4 ?4 P; B7 @; r2 w) g6 J
}' h+ P5 A& X/ _: U
</script>
3 V; ~) ]+ X: C! f9 T# q</body>
! S% |! e2 C5 Z7 {. m

欢迎光临捌玖网络工作室 (http://89w.org/)