Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"( t+ ^6 H9 {; t% q. N) K* t
         c pageencoding="gb2312"
( d/ e& g) q( g# ~5 m%>
. u) K7 H/ q* C4 }  E) d<style>
5 k2 p; C8 Z2 s.f9{ font-size:9pt; }
2 O. o) x0 Y0 a9 j# Y.bgc{ background-color:#aecaf9; color: #0033ff }6 `8 I3 c+ S/ |0 z/ @1 b3 f
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
: R6 i2 B$ K1 l" I, K  M  border-bottom: solid 1px #4e7dc1;" R* q  h3 n1 ?* Q- ?5 c7 d7 U
  border-left: solid 1px #aecaf9;( s3 [& _8 i4 B# q% v) t
  border-right: solid 1px #5679bd;
2 r/ @1 B4 a, p+ l$ T  }% o2 {) H  padding:1px;
. e$ o, i8 ?7 K" z' J  m  margin:0px;}$ p. Q6 D6 d/ I0 ~* X
</style>1 s' ~! H& k" D6 S- `) A
<script language="javascript">
# W5 M1 @- p) l* F- P<!--+ U4 K5 q1 |8 b' c- f
function rv()" R; o6 Z, _8 c- z4 a
{
* ?2 _( F6 s% k% n9 s3 \  var val="";
# j3 F+ Y. p) T" m7 ^' T4 B% H  for(i=0;i<combo_box.list2.length;i++){/ h2 I* {" h# s6 }
   val+=","+combo_box.list2.value;  M. M# i4 X* _3 Z
  }8 F( h4 f8 I2 q& b- |# x
  if(val.charat(0)==","){
2 E, X/ `& \" A4 f. Q   val=val.substr(1,val.length);7 w+ J1 ?6 H& Z- n9 g7 B1 t
  }4 U; b& ]: J) \  @2 K* J# Y
  opener.form1.frecname.value=val;7 @) D- M2 g7 i# j, s/ D8 M
  self.close();, d" v4 ~- q' {* O8 d' F
}; b7 K5 q% s6 J4 T  D5 F, Y2 ^
//-->0 _% M# y6 }# D" q% ?* Z- L- u
</script>! z& D: ?" H! u2 {& I
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">5 W, F$ Y9 U" p8 S& D
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />7 n+ g6 V3 O5 G" P  R9 F4 }
<%! u+ Y( }* y* ~7 `- W. `2 \5 @/ t8 I
  cdatasource ds=new cdatasource();  //数据联结bean实例
4 m8 ]3 f! I! o  java.sql.connection conn=ds.getconnection();5 }/ {7 Z: O% ~
  java.sql.statement stmt=null;1 N' w) X# J, t
  java.sql.resultset rs=null;2 W4 u! \/ Z$ ?1 I5 R
  cdatacheck dc=new cdatacheck();" r/ ?5 M* F  p9 h0 C! a1 ^6 k
%>* Q5 c* }5 s# S% t% R
<%( Z) T+ j* L( w4 s* A. A8 Y5 g
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) U9 n( K2 i. G. v; Y' wstmt=conn.createstatement();
1 w6 L  O- D  \+ ^5 e! qrs=stmt.executequery(sqlu);% i( L5 D0 \: X9 u
%>
% p  B. k- {# n8 s% s<script language='javascript'>
  t* y# x1 s7 ^3 p7 zarr = new array();4 M8 ^9 Y$ d3 w3 q0 T
<%  int temp=0;
* c3 C! F" J5 g1 ]" Qwhile(rs.next())! E% l+ I. c$ l- l: y0 K4 ~
{
1 J! {1 I& M( r9 L" d- W. }%>
* o$ D+ {2 v' S( ], carr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
* R$ R! D( H& I# N- i6 H<%/ R3 C/ D: B$ x
temp = temp + 1;- m! k' [6 c' S! f7 K! S+ O
}1 W9 G" }) C0 t; E' y* U
%>) o, X1 o7 Z. x- I
temp=<%=temp%>;8 a, @" T) y, T
function changelocation(id){   D6 I/ p/ m: B. D
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 + t; q' `. B6 u' p( g8 g
var i = 0;
3 x' S5 f" n$ ]9 ]8 ?document.combo_box.city.options[0]=new option('-------','');
2 Z' K  d$ E0 a1 i; Mfor(i=0;i<temp;i++){
1 T4 G, U) A& |( I' w2 A: p( e! nif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
  a" M4 B. ]! N( ?& T2 m& Udocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); : J% M4 G# c( L; J6 f0 C5 b
}
4 [; C8 Y/ l5 b8 L& N2 B} ; i. n; z9 z- p- F: s% y
} . \3 ]0 Y$ Q! I/ H' c' N( Y  x% @' Z; U
</script>' p/ a4 t+ k5 F9 ~- w4 _: p
' U7 I! Y$ I# a2 l7 |& y! D
<form name="combo_box">
& A7 D& l9 T0 D; u/ w/ ~/ q& W<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' B% n8 [  |3 F5 L  <tr height="24">8 s" P& F; U6 y7 b) O4 C9 U. Z0 {
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
3 W( ^& m7 P6 o: m" ?' }0 h    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
/ w5 u" Y0 X& q9 b; Z& X" `8 {( K    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
; g/ x  D, N* A" o    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>! n  z& Z5 B4 ?. M
  </tr>8 J6 H. F/ F4 e- w# X. f4 g5 o
  <tr> + e: m$ b, L% j9 a0 X8 z1 C4 V
    <td>
% K, ?# ~- T) t9 m# y" K2 }. q  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
$ K8 `* g5 j# Y( t1 P: ]$ E+ u  <option value="0">请选择部门 ---></option>
. j( z0 L4 g; e4 M  \$ N& d/ L# u<%
: P. e4 B& G7 Q: ~6 l9 W: u( o    string sqld="select * from tdept";: M) B9 O7 C% O5 V$ A9 X
stmt=conn.createstatement();* L5 A0 x/ T- v/ s( {* z
rs=stmt.executequery(sqld);
$ y3 q5 T8 J1 L( U: Iwhile(rs.next())
: t( n% |' O( X# h; b6 Z# B{2 q5 r' O5 d/ D- R
%>) G( J  R8 @$ }/ `  F
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>4 \) t+ G# l! X- I* g
<%# s+ e: M' m9 S; o; ^1 Y% n
}: {$ y' k$ ~$ P, o  c5 }; M
%> 8 r3 O3 n& _: k. m4 ?7 T* Q
  </select>& H& ?" d" u' v( R2 z2 M5 y
</td>
" k1 r+ `2 g9 x9 `4 o    <td>+ }8 s& {" _7 Q
  <select multiple id=city style="width:150;height:200" class="bgc">
/ t2 \' N) c# }; D1 s  </select>
9 j$ f' h& f5 W$ U2 K! l</td>
/ g, t/ ?+ c$ V! O    <td nowrap align="center" class="bgc">$ P9 J6 @, N$ O1 L( X
  <input type="button"  value="<<" class="buttons">. K6 @0 g1 V5 h1 h9 k4 |7 l
  <input type="button"  value=">>" class="buttons">
7 f6 g+ ]6 p' }2 n6 z- Y</td>/ z( M7 k# ]4 B. h
    <td>' X5 K7 \( _! ~/ ~; c
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">* c/ O3 m) q1 q2 W8 a
  </select>
5 }- ~0 G2 |! G" @. V</td>
( y, y+ `; L8 ?$ `8 j7 b2 M3 o  i: k% v  </tr>; |! I' t1 H# ^. x+ D
    <tr class="bgc">
8 r6 d9 o; c5 A1 f9 b8 ]    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
9 w" s$ V% x$ i; \. r  </tr>0 z) Z& q4 J; R0 a
</table>
7 g& w( r2 f* F8 {: c. Z</form>
5 s& V0 a5 @8 Z- b/ |" r+ n<script language="javascript">
2 }8 z/ j& g; N7 ]//人名移动
' L; h, h& S- [6 W" S) X  |1 ^function move(fbox, tbox) {
+ B0 Q3 g+ N* M" t0 D5 ~var arrfbox = new array();
4 o! C* B9 P' ?: @, e; L2 L' ]var arrtbox = new array();0 |; S/ V: y" e
var arrlookup = new array();! e: @# p, p) t& G2 W% Z6 D
var i;
+ g, }% B. X5 @+ S8 vfor (i = 0; i < tbox.options.length; i++) {
& U# h& C2 q+ M/ `1 q2 `- zarrlookup[tbox.options.text] = tbox.options.value;# |% X4 K! A. V' k, s1 M/ m1 n
arrtbox = tbox.options.text;
! u9 x, {; ~: B& s}0 ]) H' D" `8 a% h$ j9 F1 D- ~9 n
var flength = 0;1 U) ^8 S$ k: l5 r6 I
var tlength = arrtbox.length;
( ?9 j2 A  m; v( K. zfor(i = 0; i < fbox.options.length; i++) {7 Z! r3 q2 d  H, P- S9 \
arrlookup[fbox.options.text] = fbox.options.value;/ s) W- T% t8 C
if (fbox.options.selected && fbox.options.value != "") {+ w2 O' Z7 w- }# o/ O9 x0 k! p
arrtbox[tlength] = fbox.options.text;
! n9 p4 U; \+ N; T6 g9 Q- stlength++;
) i) z) A3 N3 z4 e. b5 ~}5 U! V/ h# P& s
else {  K9 |$ o2 L8 _: ?
arrfbox[flength] = fbox.options.text;. p: g2 u  H& g
flength++;% m( _- t, ^$ c* O1 c6 Y( i
   }
  b" d4 X$ _& Q; r, G2 ^; U}
; L: ^, R7 R7 narrfbox.sort();9 c) k; r. s% U  t; c# D
arrtbox.sort();
( `% x+ X+ A" N8 ?* D0 z
) R" t; ~" ^2 }8 `' l) `/ {fbox.length = 0;
' R' I4 [5 @; k5 }% S# f; Wtbox.length = 0;4 X  c8 E- A5 q% N; _  |- t
var c;0 q; @' v1 k5 ?4 S# [
for(c = 0; c < arrfbox.length; c++) {
; @6 {/ x& B, r7 `( hvar no = new option();1 B7 U! w1 Y( ^9 k
no.value = arrlookup[arrfbox[c]];0 l3 i) n2 D" z- V  f
no.text = arrfbox[c];
. i3 g$ f7 X* h5 }fbox[c] = no;
* Q, k! b/ H8 {. F0 z7 Y1 ~}, R7 E9 a, V9 X, }
for(c = 0; c < arrtbox.length; c++) {9 D3 n* b3 f% E7 ~2 ?; p6 k. ?
var no = new option();" l: a- i; ]2 h
no.value = arrlookup[arrtbox[c]];
1 s1 P+ v9 P, D9 p+ jno.text = arrtbox[c];
) s: @. c" P3 R$ btbox[c] = no;7 Q% }7 \* `( b* ]& _& U; |
   }
9 x* Q! u' L1 i2 K4 _/ T8 i}
: F8 k& u0 U6 n; l, ~: F, z* Z</script>
2 o' e- V; f& E& f3 ]! @</body>. Z" z! w7 h( H1 \. f! A





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