Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"- s& d, Y6 N# w/ M
         c pageencoding="gb2312"2 w; g8 b- S9 M+ S# n
%>  N2 J9 w7 k0 G5 ~# }
<style>: N" m6 U0 S! U" A
.f9{ font-size:9pt; }8 x4 b3 e* r2 u* J
.bgc{ background-color:#aecaf9; color: #0033ff }) ~0 V4 O: s9 n; S" E. m% c
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;" C; S+ d: L4 m+ c8 _5 O
  border-bottom: solid 1px #4e7dc1;; |( @+ a8 K+ j( s
  border-left: solid 1px #aecaf9;
9 x& J* U" ]/ @7 W- S. S5 o  border-right: solid 1px #5679bd;( Z+ |" v: h/ n( I& h
  padding:1px;
: p1 p! X2 Q7 T6 G  margin:0px;}$ X/ i# O2 P% u! t- L0 W2 c
</style>
8 ?; i( S2 j& b2 ^% X# T6 X2 t<script language="javascript">
0 N) A) q3 X! U. v1 w8 ?1 q<!--+ x7 t9 N8 w+ ~1 H" P
function rv()" l' Q; a5 ~: W* M$ a& y
{' {0 B! j3 z8 f% m- E
  var val="";9 b; y0 y1 P* s- K( l
  for(i=0;i<combo_box.list2.length;i++){2 j9 o8 J' _7 x7 X* {
   val+=","+combo_box.list2.value;
+ E. B6 [1 _; ]# I; Q# G7 u5 d  }5 o7 w9 _( L: C1 F
  if(val.charat(0)==","){' B  t7 x  Y: w; y9 A+ P
   val=val.substr(1,val.length);
" J8 o( q  N: k# F1 j; w  }
- i# n* N7 l! p! l8 U  opener.form1.frecname.value=val;
3 _# L7 Z" }& r* l0 t1 l  self.close();
4 O) b# j1 q2 q/ S- f}
0 e- l0 ~& ~$ _/ t, G//-->
( r: u6 C' y% y. v</script>
9 w; \. f& ~( L0 `) }: k. X<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">5 ]4 W. s5 ?: w( y4 K6 O
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
: c" |7 t. @. N<%- i  O- s) `/ L# o8 j$ `& @
  cdatasource ds=new cdatasource();  //数据联结bean实例
$ h  `- B& w7 L& e3 `& X  java.sql.connection conn=ds.getconnection();# Y0 ?% G- R$ y. @/ K
  java.sql.statement stmt=null;9 ]' {+ C+ x+ Y; ~1 |
  java.sql.resultset rs=null;
& s, m- O2 }3 [; `; g  cdatacheck dc=new cdatacheck();
+ h" Z- x: @8 J( g6 x$ ~%>/ v' `* e4 O! i( G4 Q+ ^$ B
<%+ G! ?! N+ D3 C6 q4 m- a
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";
  q: ]7 X8 _* j& d: istmt=conn.createstatement();; R4 M# g: g- e: {  |
rs=stmt.executequery(sqlu);
4 @( q& M, E) B. r/ M%>
3 y/ K2 r2 q) l<script language='javascript'>1 k* G6 X% }/ J" I- |. f- H+ ?
arr = new array();
/ s" H+ q  I. b: ?3 `<%  int temp=0;
+ o. V, C8 A4 t% _while(rs.next())
) @4 y& D. k  J' K4 M. C{  `) o3 B0 I7 J5 v8 E/ G+ W
%>+ R8 r/ a& c9 l( |* m3 {& N
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");* ?  k! k& K6 Q- r
<%
" a% n- X9 _4 L# t" Itemp = temp + 1;  w) N: b: B9 Q
}
% {2 [8 V* l7 b9 L: _1 n& H%>
7 h3 K0 b& g0 o. S- ttemp=<%=temp%>;+ F& V0 y  J. i) C3 b$ A; m/ ?
function changelocation(id){
8 ~/ k) @% V& a2 ~, e. {" Ydocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
6 t1 f0 u6 o. L& |var i = 0;
* f* n# m* {0 R! q2 Cdocument.combo_box.city.options[0]=new option('-------',''); / P4 R: v" t1 e
for(i=0;i<temp;i++){ . P5 K9 Z% T! p% G% t/ k" ^
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] $ k% U3 ^, P* u* ]+ @* n9 C  W
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
7 d5 ^9 g& k+ d# @$ @}
$ I- Z! {3 [7 L7 o, F} , o3 A' W0 g$ o0 T* M
} 7 i! q% v7 K$ @5 _) a: U
</script>8 X0 j. {4 P  D: X  {# m

9 D( ~" d# b6 }6 E9 e<form name="combo_box">8 Q1 E+ [) s7 F3 ^
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
- V0 J7 x4 A" k) {) J2 P  <tr height="24">
+ u) h0 M0 {3 l  \    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>+ N# S3 G" p5 [3 C
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
' |* [+ c* Q- U6 [: w5 {    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
% W: I+ q& t% l' G4 n4 H    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
  F/ R6 o* r' y7 F4 h' N* N1 _  </tr>3 A0 e9 ?% h+ S9 ]- B
  <tr> % a/ }4 m5 z. I  R- y; O/ I/ ^
    <td>5 ]7 T3 @2 p; t# f
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
5 q" k$ W- h3 K$ p) r& u6 `  <option value="0">请选择部门 ---></option>. b' n' p, M9 J6 j0 K$ L: h6 h
<%, j9 N( l' D/ y0 d, }
    string sqld="select * from tdept";
% \6 P  i, @& F7 ]# i9 u1 f; bstmt=conn.createstatement();1 g( L5 x# z7 w; @
rs=stmt.executequery(sqld);
, }+ V. D% v: U% I% U/ v" }; Twhile(rs.next())2 _- s( |# v& `! `
{
+ N$ f- ]+ r9 Y$ O5 o. S+ D%>
$ ~) e" J8 ?7 H6 [% P$ n  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
; _" Q) U& u. C* ~5 H: H<%
$ v4 G8 r' a" s# J1 b  K- s: }}
) L; N  C% I* G%> 7 c/ o# f9 s5 T' V+ e9 }* f
  </select>% v( A. w" |$ q
</td>
: e7 ?1 K5 J  R+ v) J3 `' l    <td>
. {  y* d" z' n& D; Z$ h$ g  <select multiple id=city style="width:150;height:200" class="bgc">4 g  S! P% S2 W0 E% ?4 O7 y
  </select>
7 [& P9 b! E' J7 m0 E! J# ^- M2 p</td>, {' _3 S  j) H' `& k" z
    <td nowrap align="center" class="bgc">* I/ J5 s: f9 [. o9 t1 b
  <input type="button"  value="<<" class="buttons">
8 H( i4 {1 [' t) |  <input type="button"  value=">>" class="buttons">) W) Y* |. ]5 ^2 T
</td>; M& g& w( E0 I/ ~8 Q$ x& |0 r; J
    <td>
7 ?+ D7 t# l- z- g5 c2 ]3 P  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
; @4 P1 X  m' M4 k! m% r  </select>, t6 @; G" |, l1 Z7 G
</td>
5 ^) m4 i* M$ W, _3 w8 `8 g  </tr>
" N, P4 Y* R$ D7 @* m( a    <tr class="bgc"> 4 ^! X( P( p& T
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>- [0 e6 r) B" j+ f; z- I
  </tr>/ A. Z7 X% E. q' m  N2 ^2 _: I
</table>" D* E: H1 [# x8 X# w- y
</form>
+ M7 O2 m0 R( ^+ l  ]/ j<script language="javascript">
1 e  K& S% h$ Q& t//人名移动
% w; H* B1 F7 S- x4 U% v+ {; hfunction move(fbox, tbox) {
3 {6 P  j- t0 |2 Nvar arrfbox = new array();: Z: n: E# M) n( W
var arrtbox = new array();, B6 {; N% \8 ?
var arrlookup = new array();2 D1 O% l" P1 a; F- L2 Y+ e) T
var i;. q: _% d! N/ G- m9 v. y
for (i = 0; i < tbox.options.length; i++) {1 A1 ?2 m* z/ c! k
arrlookup[tbox.options.text] = tbox.options.value;8 `+ y2 K  g) H) Q$ w. h- R. M
arrtbox = tbox.options.text;
' s$ w( A9 W' C; ^& F; g" |" x}
' Y7 ~3 t( L) {4 D) L9 U9 }, @/ L) kvar flength = 0;
+ }  Z1 g4 G7 \0 \# K. w. V- r% u6 mvar tlength = arrtbox.length;
" o  I4 V5 o2 \. y9 j0 b7 ]* rfor(i = 0; i < fbox.options.length; i++) {1 |9 J1 P2 y( ?; g% s" a5 v
arrlookup[fbox.options.text] = fbox.options.value;9 B9 K9 f& ]9 u0 Q! q
if (fbox.options.selected && fbox.options.value != "") {
; m, H- J$ H0 s6 v6 ^+ Uarrtbox[tlength] = fbox.options.text;5 _7 l7 M, `. ?7 {' i
tlength++;0 V, a, L+ _5 ?) ^: y: ~
}7 n( X; W4 J, t: S4 J. }' V
else {
6 ]/ W) g0 N  V9 U  M* Rarrfbox[flength] = fbox.options.text;
% @% Y. b5 z- U! a- I0 O  K2 m7 {flength++;0 [6 k0 I8 o" V/ Z7 \3 U9 l3 S
   }
0 J0 S, g! L: j& N}4 x4 Y* H( z9 a
arrfbox.sort();
9 X$ X( U! [1 U& {arrtbox.sort();; z- N( G; H; P# m" r- v+ P1 Q
- s) ]1 w& b- U2 {
fbox.length = 0;
7 d* n2 O3 X# i7 H0 D' Qtbox.length = 0;! A5 L, D2 t( a8 E
var c;
, x$ {9 A/ E8 A1 a- {7 kfor(c = 0; c < arrfbox.length; c++) {
1 Q1 s2 j6 y1 D3 T+ s; `" x: H8 Uvar no = new option();  D. r6 w5 _; m8 P" v
no.value = arrlookup[arrfbox[c]];
6 l) I9 d$ u5 \8 C- c* mno.text = arrfbox[c];1 b6 |2 S& c+ ~+ B) D1 M  R
fbox[c] = no;
9 J; C6 \. r9 C}# w4 [( a: a" V! p
for(c = 0; c < arrtbox.length; c++) {0 |  B: b, d5 U% z
var no = new option();+ q5 O. I2 R0 _
no.value = arrlookup[arrtbox[c]];
4 X* Z2 S2 N& b  T  u6 |6 |+ c! V6 zno.text = arrtbox[c];
3 C  A0 S8 d  _( q% X, g7 Itbox[c] = no;1 ], I( w6 A6 z! ?  O+ Z+ z+ V
   }
' m1 Y! Q* Z- w# @3 C}& Z7 i& v1 a% h* P5 ~' K- R
</script>) h/ k4 [6 s- I0 A* Y
</body># H% C# w; y, p) Q9 ~





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