Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"9 C+ e6 ~3 Q. y$ D, B
         c pageencoding="gb2312"
1 z. k2 }. ^8 i7 _%>
5 G1 o% X. ?4 a. U! _& r<style>, V) [0 `6 E. |$ d1 L
.f9{ font-size:9pt; }) J3 x# c, t& t* G/ F/ i
.bgc{ background-color:#aecaf9; color: #0033ff }
. e  K- w( v' I7 W$ u! v.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
  m' V* n2 ^/ k0 ~' W  border-bottom: solid 1px #4e7dc1;
2 P2 k2 Z1 Z  S+ q8 N  border-left: solid 1px #aecaf9;
0 B7 j5 b( C! Y* j3 X3 v- I2 W" J  border-right: solid 1px #5679bd;
# v, O. H) y) R& }) T% |" I3 R  padding:1px;8 _, Y1 v# o% d0 T1 {7 ~) E
  margin:0px;}) D/ l: E0 F3 m
</style>
9 V2 F7 @2 ]8 h7 x<script language="javascript">  [6 R: f; ^; a4 \, q8 l) ?
<!--
. v, ^; B0 e2 }8 O. H7 kfunction rv()! U1 ?- o+ n: G: f  c+ P, ^4 C6 Y
{5 t7 K2 L2 j3 l, G; y/ z
  var val="";$ s4 O9 a$ h) [' I
  for(i=0;i<combo_box.list2.length;i++){
, F' b: ]9 |$ M$ d$ D   val+=","+combo_box.list2.value;* I) v$ x7 P) t+ `% U% V
  }
. D3 D4 [2 m' x- A& B  if(val.charat(0)==","){
- ?, g! _! |8 r& K   val=val.substr(1,val.length);6 S7 s9 g  ^" Y% }3 V
  }
# a8 a( ]2 b* ~8 F  opener.form1.frecname.value=val;$ i" T4 }4 E0 a
  self.close();3 f# I% R' C5 N- o
}
& k) [' Y6 Z6 Y//-->+ l/ B& [! W6 N* i% ~' z2 I
</script>
0 e7 X- D* `0 D0 j. i3 e/ N<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">7 o  ~$ N7 Z' o! w2 I1 m
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
0 e; m5 F* c' w& n) u<%
3 g& h# e' I- q7 c3 b: X9 P" }  cdatasource ds=new cdatasource();  //数据联结bean实例
9 ~& u3 D4 H  Q0 N1 i  java.sql.connection conn=ds.getconnection();
5 M: w; I, ~- f  java.sql.statement stmt=null;
( i3 a% X& K! G, U1 e5 t) ~  java.sql.resultset rs=null;8 M9 V3 H5 V8 p1 c2 Y
  cdatacheck dc=new cdatacheck();! @+ S6 Z$ D& z1 [3 l. Z5 r" d1 j
%>
+ g& C0 D! q- f$ d- \<%$ j2 q5 d, ~3 J& Q7 ^$ R
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";
: y! O6 X  E( i. |stmt=conn.createstatement();
' \9 r9 Q- a' p/ `& ars=stmt.executequery(sqlu);
2 ?7 B/ t' t  c: D%>
% a* m  ^6 {" A3 S3 M<script language='javascript'>
. X# R8 W. U4 a: i6 q4 narr = new array();7 E( {6 Q, P9 {. h
<%  int temp=0;
" a; x& g2 c! ^) L  Bwhile(rs.next())1 u, k: e: S( H3 S+ ?: e3 N
{
4 f& T* {3 k' C; b# z9 A! M3 ?%>6 Q/ W1 o. F$ [7 a% e+ D) C3 U
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");/ q+ S- E( p% d. J2 V1 g' f
<%
( y% I2 b) S  ~( I: Itemp = temp + 1;
  M7 w$ Q0 ?, Q2 G! v* W}) ]* v+ b, T* h$ i  E+ d2 c; q
%>
3 b; L, [7 [4 ]" ?temp=<%=temp%>;
3 ?  L& k# S# W( ?" F+ L4 cfunction changelocation(id){ 1 t( A% \; n5 `
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
: w# w- E/ x; ^4 i+ `- s( m8 @var i = 0; * d3 a- ~8 `6 v  X$ A) `9 ?
document.combo_box.city.options[0]=new option('-------',''); , j+ M2 A0 Z( v" y
for(i=0;i<temp;i++){ ( s! T* Y: @, ]( _3 P  u" N- Y. O6 a
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ( c3 ?& @3 e7 t  b5 R% U1 S
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
" s& V4 m! v$ ^; h+ |6 X5 D}
% X. S- a, b1 O9 c3 G}
1 g/ J) G+ {+ V# D( t9 g4 ]. X, Z}
% C6 ^" W+ S" m</script>
* m  v. W* o/ L4 L/ h( Y& {2 g7 I
<form name="combo_box">
" S: o+ W1 ]; y9 ^  X2 I<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
5 a. k# B0 I! Y  <tr height="24">: S5 k9 @9 B& |) h9 u
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
+ h# t+ z  r  X* A    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>) ~# W6 ^2 f# n1 O7 S
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
7 M  ]9 J( u( Y1 M" }& f6 c    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
0 r/ z! N  M3 p8 X  </tr>
7 e& W  Z. f0 p4 e0 q; l  <tr> + B: H- W9 ^4 B0 f
    <td>2 \! A; T3 @  S3 A/ |
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">7 h3 n# S3 D6 D' ?2 q* o& Z6 {
  <option value="0">请选择部门 ---></option>% _2 z' P+ U. \1 h; o1 M0 ~" n
<%; M6 V6 K$ F. Y2 S; c6 k( K, q" t
    string sqld="select * from tdept";
+ [0 m& v+ i& k* S) rstmt=conn.createstatement();
* R6 ?/ j$ K" j. C$ C- l- z4 b3 |rs=stmt.executequery(sqld);' Z9 [8 [* v' p: t
while(rs.next())
* g0 }" I# n% L{* X& h/ G' E6 K  f
%>2 K0 q1 F, z7 j: X
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option># k; q, B; o6 Y4 E( O: i; K
<%- x% y$ u, T( F$ ]  Y& S
}/ X, f3 z' ?9 Z, @
%>
: a8 v4 E+ M3 N  F( H1 g  </select>' }3 N  o0 ]  j+ j" J. w7 _: c, o# Z
</td>
9 T, S4 k; p8 o    <td>
; _1 T* k( U/ q5 K! e5 o  <select multiple id=city style="width:150;height:200" class="bgc">
' f8 W) N7 Z& o0 V) P( c  </select>4 `# t7 O  C. O5 P) U! G, j
</td>2 }% W6 V" \7 H+ \' i0 _
    <td nowrap align="center" class="bgc">8 u3 |4 l% Q1 _. d/ o
  <input type="button"  value="<<" class="buttons">
- V7 r& W) a9 g3 b  <input type="button"  value=">>" class="buttons">
  b0 X6 N7 d" O5 V, b2 c" v</td>
) g0 _$ w  I" j% Q, F    <td>3 H0 m. \/ x7 Y) ~2 W
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">$ V' q. D+ [2 j
  </select>
4 |; X8 v  `& x4 x) s/ z8 b. ~</td>4 ~# V  Y2 Y5 y  h9 ?; `' E
  </tr>
4 k  H8 }: A" \( g/ J* @) c    <tr class="bgc"> - g' i* M0 S# x1 f! v3 l
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>5 g2 Z0 T  p* _
  </tr>3 Z7 L7 ~/ Q# t3 k7 g" G6 c
</table>% y2 C2 V; [5 F6 a7 w8 r2 i
</form>
8 R5 G& d' Z6 ~5 H2 B$ G<script language="javascript">4 n2 y& i* W8 d$ s
//人名移动
  i& }' a" ~  x5 k" G+ Xfunction move(fbox, tbox) {' h0 @* Z1 G2 U6 _5 i8 d
var arrfbox = new array();
& ?3 e9 T" ]8 _3 ivar arrtbox = new array();+ U) f* @- l" X: L) G+ T
var arrlookup = new array();
) ^/ g* F5 @- k$ N# {var i;
8 K2 i1 j# j  Ofor (i = 0; i < tbox.options.length; i++) {
" f" o( H& ^! `# Marrlookup[tbox.options.text] = tbox.options.value;7 S* Y' x: L6 [7 S0 B4 g& G
arrtbox = tbox.options.text;3 a% a  _( k* t1 Z6 e0 g
}5 V: U7 I3 A' o' R9 V2 d3 C
var flength = 0;( z$ |7 x, u5 i. N: o
var tlength = arrtbox.length;
# o5 @) q+ l* M% d- s1 O5 cfor(i = 0; i < fbox.options.length; i++) {
2 l; s8 S$ M& {# O# l- Qarrlookup[fbox.options.text] = fbox.options.value;
. a) z+ C* z, E" S( F5 ~7 x0 X  Tif (fbox.options.selected && fbox.options.value != "") {, y5 l% E, |" p. I& u: f8 z2 Y
arrtbox[tlength] = fbox.options.text;
& e* @) r0 f% R. W5 r% Jtlength++;  C9 y% _/ m0 ]! ]
}0 p6 ]: Q/ E; s% c. ]1 H* C$ a, U! ~
else {
/ u7 z2 V' r: |3 uarrfbox[flength] = fbox.options.text;5 z5 |. H4 {' w* y* I
flength++;
5 b: k1 F/ r. k; J   }
' i8 `" H1 c2 C. {* Z3 {}# C. B: l% I8 g; Q
arrfbox.sort();5 _+ g. n' M5 e( k' ^
arrtbox.sort();  z( s5 u7 Y8 U) I3 V: D8 D
3 z# M! t* C5 _0 Z5 c
fbox.length = 0;' v8 |: ?+ f, W- @
tbox.length = 0;  Y  z. r1 r- L
var c;
( [' c, f4 b; l9 e- l. mfor(c = 0; c < arrfbox.length; c++) {
8 _4 Q5 D* ?7 `3 lvar no = new option();* i) M6 V: G3 |+ u6 p+ ?
no.value = arrlookup[arrfbox[c]];
, q6 m. Y: \6 y- E7 @$ n# b) @no.text = arrfbox[c];
) n! I3 f2 t+ v; b9 Hfbox[c] = no;7 J1 S$ d/ d& G8 D
}
+ i) r* o$ E. Q7 r3 v6 C: B+ tfor(c = 0; c < arrtbox.length; c++) {
5 S3 Y* C7 Q" z' Q# @& Zvar no = new option();
+ B8 g& E1 \0 S) }7 G& `  x: t# \no.value = arrlookup[arrtbox[c]];5 N7 ]; H* E# F8 u4 @; W  }: @
no.text = arrtbox[c];
1 Q" @8 l- G8 L' @: }8 etbox[c] = no;- `( y$ ?; K/ D) r$ y& [4 b
   }
' B  i8 M4 N+ p" V2 h}/ t1 K) t. j8 R" [+ D! H
</script>
. ]1 y( j' O; ]7 z</body>
% |9 d# M, g, S8 b% n* W4 o" }





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