Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"9 _# O2 p( ^' P; ~
         c pageencoding="gb2312"0 Y7 d9 X& z8 G- o: S- i: E7 I% V
%>. h7 @% F% p# b9 @
<style>
! c: B& d  z+ w* s$ u- J  Y.f9{ font-size:9pt; }" D9 j& f9 A" i. T8 x/ n
.bgc{ background-color:#aecaf9; color: #0033ff }
' S) P' j: V# r.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;  S5 h6 M1 d! y
  border-bottom: solid 1px #4e7dc1;
& |1 Z* f' g9 H$ @  border-left: solid 1px #aecaf9;0 _8 ]% l- [$ F& B' z+ `
  border-right: solid 1px #5679bd;
) h7 s  }) [4 Z0 q# o5 |" F  padding:1px;
7 w3 q1 O& u0 i3 {! p. @  margin:0px;}8 }1 N4 i$ L) y) _0 {! ~
</style>1 e( Z- j( {- N* w1 [
<script language="javascript">
+ V  b2 w3 U  I- U& l# U<!--
" g/ r$ ~9 t1 E( W2 S1 [6 e7 mfunction rv()
& @2 B) _' K2 p1 |) p: A/ j$ j{
! g7 ]6 R/ ?7 l6 ?% I  var val="";
8 L' ^' F4 X( M; v: K  for(i=0;i<combo_box.list2.length;i++){
3 t* s# m( ^" G( B: T   val+=","+combo_box.list2.value;
% f6 c) t2 t) {2 L  }
! ~$ Q  Z8 q: O! ]! m  if(val.charat(0)==","){
- t' n+ f; ~  z0 Q. o   val=val.substr(1,val.length);# S0 q* ]7 V# U; W
  }
$ `- r& U& h$ j8 e4 x1 J/ N  opener.form1.frecname.value=val;) l* E" Y# n2 e* \+ y8 q
  self.close();1 B6 E" r: u, d" X
}9 s6 ], ^  i$ H9 Z
//-->
; x0 @0 E8 m6 C</script>
8 d; h% N2 e3 W4 Q7 w* U2 z<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
! ]. _% J8 N; @  }+ K4 K5 O<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />4 K8 O# ^' \" w/ {$ V: g
<%! w) ?8 Y# g5 l. p( b/ t8 k: ?
  cdatasource ds=new cdatasource();  //数据联结bean实例. \9 ]6 E! M( o* `
  java.sql.connection conn=ds.getconnection();( K3 k+ \, A) X) f- ~; i
  java.sql.statement stmt=null;
) g, p. J7 q9 |4 ~' B- m  java.sql.resultset rs=null;; K, _* u" i) C( f5 s0 c4 c' C6 j  M
  cdatacheck dc=new cdatacheck();$ \( S2 n0 p( m3 A) B+ `  ]( g7 ]" M
%>" r4 e' ]/ u* C3 ~
<%5 e7 m! n% r7 `' t) 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";) H: M! v- p1 T
stmt=conn.createstatement();
7 ?; Q8 i( R& Q9 z/ ars=stmt.executequery(sqlu);! T) t& `9 p, ~( U) p8 c  O( e
%>" b7 J3 P7 M1 I; l  O, B; `3 D
<script language='javascript'>
' M" h( u( u% v6 Y% _arr = new array();: u/ T: _8 i1 S8 w
<%  int temp=0;
* n' Z+ g1 B# g3 S! ?" G, d& ^while(rs.next())
, q+ Z* p$ G* c0 ]" S" U& H* J{- |! a, n( x, l
%>1 L0 g- q8 B, M( N, `9 w" k  ~
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");8 X0 L8 r8 W0 _9 \( x6 N. O) ^
<%
# q) _5 G& O) E6 m- M4 ?. Vtemp = temp + 1;: e2 w* H6 ]* T% ?
}9 X$ O; f) `/ n
%>
9 a" B+ S# a3 D; I% i3 Utemp=<%=temp%>;
5 l' b, ^3 Z4 B; Z9 i8 P; i" j% ^. Nfunction changelocation(id){ . i& y9 P9 o" B! n
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 ; F/ Y. Z+ T  ^: b. e
var i = 0;
& o; X" g: W" n3 O6 z; y# Mdocument.combo_box.city.options[0]=new option('-------','');
6 r: u4 N4 {: [* F% Zfor(i=0;i<temp;i++){
  L" c3 D* I1 u( ^  w  e. c) `3 Zif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
; R) d2 D$ C3 |  F6 D7 }document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
; K! f& {( h/ y7 P# P}
# n9 E% ~9 Z9 ?# ]/ M( U! I# Y$ |}
  M6 `# \' x6 l  a+ v}   |2 \' }! ^. V! k- I, n! @
</script>
4 F2 T% b8 [( w- X0 g3 G/ s. p: p; U+ I, E- T. G
<form name="combo_box">
! Q$ c+ O, z3 x- E<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
) [+ R( f4 \2 S- V: H4 K9 X5 `  <tr height="24">
, t2 a2 I, s/ K0 d) Y. r* M6 o- |5 l    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
" J+ w" Q5 B2 H3 d+ ]- ?    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>( Y1 a; z/ a: P* j
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
1 r" m( h  v" W5 g' ]8 m! @    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
7 m) k5 X$ c+ @" m9 \  </tr>, U: u. O" }. B0 X" h
  <tr> 2 j3 p" ^+ T& i( w  m* s! }
    <td>
8 }( k. ~! E1 X0 t8 W% k. r. g  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">! `5 n2 \) @3 H! b
  <option value="0">请选择部门 ---></option>1 f. T" m/ X& k) s5 Z4 e
<%! o, E# E" b8 e
    string sqld="select * from tdept";
( x/ P% X+ ~8 L7 l( qstmt=conn.createstatement();
2 U. F3 N3 P$ O; lrs=stmt.executequery(sqld);
- T$ N8 f( _7 e9 p; S2 h; X! swhile(rs.next())1 H. H1 {; i. c; K3 |
{
5 v) I8 }& Q9 k% n7 |, j8 Y2 F%>+ Y3 `! M7 l& Q6 o' ^3 C3 z
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>2 @0 W3 h2 Z; W" y$ g- f
<%
* W, m* l4 N; r7 p! ~- E% M; B}6 O+ C. _0 N( a+ c
%>
* |& u* Y. V& Z$ _  </select>
3 T, q& @1 j' Q  g0 U( t</td>9 L, c6 z  s2 S+ r- p& {6 Z
    <td>* u5 ]; f4 c3 l$ b5 L) r
  <select multiple id=city style="width:150;height:200" class="bgc">. }5 z; ~: D& S7 ?+ ^4 B4 ~
  </select>6 `, g& M8 p$ u/ ]% d6 x! ~6 t1 V$ |
</td>
6 g- d5 [2 B) }8 V0 g6 z' s1 P    <td nowrap align="center" class="bgc">
# N6 g5 L1 ?+ @) `: ]  <input type="button"  value="<<" class="buttons">" Z" e, w, C3 U7 D
  <input type="button"  value=">>" class="buttons">* Y7 q' @* x7 q5 I4 u* b
</td>
7 {+ c5 T  G; ]! u% H    <td>
8 ]/ Q1 r* N1 J3 B4 p2 ?  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
3 X( f; y, W6 j9 ]% h1 P' P  </select>
, `' g  V" v( C! X</td>
# e. {( }2 j2 b' ^. J  </tr>
# }  q: {1 x1 z+ A9 z1 |    <tr class="bgc"> , d3 a+ p) N  U2 l7 q6 q
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>4 p) _; ^5 D* D
  </tr>
7 w  G) E) @# o6 p3 j5 G7 |2 O</table>
3 t# V( q: Y6 X' v) F: U/ ^# L0 \' T</form>
& B0 t/ x* `, y/ E<script language="javascript">" N9 @1 G" `5 O: Y+ p0 v6 m; v
//人名移动( j* I& }# l5 t
function move(fbox, tbox) {
" t9 t/ ]0 x& \) R9 Z$ \5 svar arrfbox = new array();4 o, t: ?5 `4 c3 U  D; V6 ^0 ]
var arrtbox = new array();
6 k! T: o& f* R# W& Q& i8 dvar arrlookup = new array();" K# l, N* _. t6 _% w& f
var i;
' ~6 ~% @8 c8 ]+ a/ d  qfor (i = 0; i < tbox.options.length; i++) {' ^- a$ j4 B" U% @- W
arrlookup[tbox.options.text] = tbox.options.value;
7 ]! S6 P' u# p' V" @: w2 t3 Darrtbox = tbox.options.text;. i# B, ^7 X6 }* f$ G" N5 c
}
# K. ^8 C: M3 P) Z$ ?9 Y. g2 Fvar flength = 0;
8 y- ~' o, P3 x% hvar tlength = arrtbox.length;
) h. j) B- l0 Q3 _+ X& Vfor(i = 0; i < fbox.options.length; i++) {
: y0 |) R2 @( g5 q3 Iarrlookup[fbox.options.text] = fbox.options.value;
% X, B% _( r& ?7 G( K; C7 uif (fbox.options.selected && fbox.options.value != "") {
3 \. j  i1 g+ n5 @8 Z3 z& p9 T; iarrtbox[tlength] = fbox.options.text;
. V6 N: f4 ~( \4 F4 }( n; otlength++;
7 O1 R0 h4 M# q: X, n: q}
+ J0 ~" f/ [  qelse {, a: A. c, e; v% Z1 S
arrfbox[flength] = fbox.options.text;
# l. w& M7 n# [; D* ~flength++;
. A* [5 f2 X$ D+ q7 j: e1 e   }: A' b4 A" |7 c. o) L! }
}4 k: L1 G7 m5 R' Y& X6 E
arrfbox.sort();
! X  a# ?6 C: [- Garrtbox.sort();2 q8 R/ {4 \9 ]4 X9 F3 N
. u$ S- _$ D( @& i) w- D3 n0 u. F& o
fbox.length = 0;- O1 L3 [, a" I; P- J: R) s  ~
tbox.length = 0;+ y3 ~; I# }+ W1 Y7 ?( K' |: W
var c;$ ~6 i! r) ]2 s
for(c = 0; c < arrfbox.length; c++) {; G* L* r4 |& V  t- D9 [
var no = new option();! Q6 B# |& \2 C4 q1 Z  N, l
no.value = arrlookup[arrfbox[c]];  {! X0 `% v8 ]& g3 U6 J
no.text = arrfbox[c];/ U7 u! o5 U# b; n$ c6 J
fbox[c] = no;! h% v6 f/ D  Q& ~) ]
}
  U* S4 j7 v3 i) B3 u) lfor(c = 0; c < arrtbox.length; c++) {
* Y( `( p" h0 Hvar no = new option();! ^& U8 c) v4 Y/ O; Y" ?% t: x
no.value = arrlookup[arrtbox[c]];* ~1 g" h- p% m# Y. H. k
no.text = arrtbox[c];+ Z( f+ R, o6 }  ~3 {# p$ k
tbox[c] = no;* C. P% b/ ]- c6 B$ x% A
   }" A  G6 D/ R$ j. S3 g; i6 F
}
5 i2 j" Q( e0 B. B  z# l% n</script>
, P5 K! J4 S! {6 l  `</body>& U( Z$ o) O' X9 p/ |3 P# h





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