Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"; c  C/ \" i( f0 Y" ~/ l
         c pageencoding="gb2312"
' r/ k4 [! ^/ L# e$ {%>, f( `2 \" j/ w, U
<style>
2 X, o/ V& q0 P: l.f9{ font-size:9pt; }9 `0 ^9 v' Y; W
.bgc{ background-color:#aecaf9; color: #0033ff }/ Y) v+ D7 O' A1 R) t( z. B
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
1 d4 g) `; t' R  border-bottom: solid 1px #4e7dc1;; v2 f5 m% P5 V9 F2 p; ~
  border-left: solid 1px #aecaf9;
* x$ W% `" j5 V0 C  border-right: solid 1px #5679bd;
8 d/ _% ]+ t; x4 i  padding:1px;
, S: @& @3 q3 A, o! d% f  margin:0px;}
. E3 l$ d/ ^# M3 E</style>6 ^) D3 ?( {3 u! o; }' {# x
<script language="javascript">; n6 S1 ^& n# L; Q. C
<!--" n3 l; V: S) M: j
function rv()  f( h# B: D. u2 j, J' X
{
( t7 l" T6 e9 y  D0 G  var val="";1 M6 B$ f- d& J2 }0 L1 p/ {- `
  for(i=0;i<combo_box.list2.length;i++){
0 H% i; w: N7 x% x$ e   val+=","+combo_box.list2.value;6 T5 T, ^* R' I8 P  u. O
  }4 {% F6 c' v3 I/ ]+ v
  if(val.charat(0)==","){
( `& E3 U; W' S$ I   val=val.substr(1,val.length);
- _, p( X9 x: h: G2 ?, g" f  }) v% c) X0 D6 C
  opener.form1.frecname.value=val;
7 l- i+ m9 D  |  self.close();
7 o* q* E  r: u5 b7 R. y}
; A0 ?. R# S. J3 Z//-->6 v- t# f* X3 T3 j5 W; a, f
</script>
$ h1 P: D2 Q( y' }# i+ h8 s& Y2 z<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">8 H* ~& i, B; @8 _7 h, n
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />' i, ?& v. x5 W. B4 s0 k
<%5 N3 j. v2 l! r4 b* Y7 Z
  cdatasource ds=new cdatasource();  //数据联结bean实例
8 H* j5 z. r! s! Q3 R8 v* D  java.sql.connection conn=ds.getconnection();
6 U8 b$ J+ A( B' j' [+ f  java.sql.statement stmt=null;
' y! P3 ?# ?5 P2 }  I  java.sql.resultset rs=null;' B, N8 G: T% k5 }% ~
  cdatacheck dc=new cdatacheck();
2 d. ]4 Z2 v5 c1 m4 p. Q, _%>
- h5 r+ C5 M; Q3 ^<%
2 r, N5 E2 s* M. r7 F9 g% V' ystring 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";
- d) W/ C: f1 I+ U  jstmt=conn.createstatement();
3 b  }1 T3 H( V/ a! x3 Prs=stmt.executequery(sqlu);1 j& b% s9 I$ N3 O2 p: C
%>3 _4 I1 L8 t) @% j) R3 L
<script language='javascript'>
( n8 q/ s, ~( W3 k" i4 W$ larr = new array();
2 ^" r5 a3 R6 [# d3 ]7 I<%  int temp=0;* x: Q5 |- \, |. ?' E
while(rs.next())9 j# O3 \- }7 G" Z3 o
{
% x' R; e2 F" g$ V, B6 a/ ?%>9 }# E7 f. F  O* Y8 b& f$ q) s6 D
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
) C# h0 C5 x) o" f1 d( K<%2 J; u& E& p( q+ ~2 E* i; e% k3 O# T
temp = temp + 1;
0 k% k( a7 X; @/ I- r}
1 a, W) G* }! [7 Q2 g4 \' {+ J: m' A1 ]/ Y%>' N/ a, D; Q* X+ \# L, K
temp=<%=temp%>;5 ^2 x' o& B* p9 o
function changelocation(id){ 8 h) I- b8 u" _8 z. u( s) J
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 7 S. D" B8 M3 l( [5 [( a
var i = 0; 4 @4 G1 h5 z. ~3 U% k
document.combo_box.city.options[0]=new option('-------',''); 7 r5 n2 P, ^$ _/ I2 m4 T7 e
for(i=0;i<temp;i++){
5 }& [  H3 o) m: l0 aif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] : L+ m' V( i. W/ ^
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
' B) y. Q2 z! K5 |7 ^" U5 s% I3 b}
3 o( g/ C! }* O* u4 D' Z2 {! W5 i}
3 _" i8 d$ n" @# w8 ~}
+ x8 m3 s/ y2 ^</script>& _! p0 Q% K3 b4 O$ Z  i
. t2 C- d5 u1 ]; N+ H
<form name="combo_box">" U7 v, c( b) K
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">' b0 ?, E  k0 A3 O7 T$ G8 q( j
  <tr height="24">; R$ A6 q& t0 j* {
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>! m2 U6 U: a/ o
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>* \4 k8 M1 W/ x8 h$ q$ H
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>; Z( m! |% h5 O( ]3 A6 w+ Q1 d  ]
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
! j2 A: G- t' C- b& {5 Z; k  </tr>/ \5 F1 P' A8 a3 X8 I& Q
  <tr>
+ B2 ^! ?* F6 M6 I8 D6 M6 p  ^    <td>7 w& z# C5 Q+ `# f
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
8 n7 o4 _7 j* A4 E" @7 Y  <option value="0">请选择部门 ---></option>
0 z- R- g/ z; @8 m& m# y/ r<%' b  R& W  t# \+ w/ |3 w- n
    string sqld="select * from tdept";# y0 G9 \9 {) d: A; g0 s
stmt=conn.createstatement();2 e+ G; @5 Z2 @% M5 Y  V
rs=stmt.executequery(sqld);! d% L& y2 k3 K6 @' r+ o' y2 M' r1 G% ~
while(rs.next())
) f8 ]4 C( X# h# f) |2 l{
& O- H# f. u3 Y" w, u0 ?1 R%>
5 _% C+ J0 X; W# [  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
# l8 q7 I' g" ~5 y! x<%! ?9 T4 ~0 \$ q* b  G6 Z& c: |' _& m
}0 A+ Z0 e# p! Z# v5 b8 d1 E
%> ) w$ l+ o' V& J" V/ }
  </select>
% Q+ h, P+ P% r& _2 a- A6 n1 i/ @6 F</td>
* |9 i) X* S$ w8 u/ b5 z    <td>; t2 T, {# Z3 Q% ~( X' c
  <select multiple id=city style="width:150;height:200" class="bgc">9 A8 B- a- ~1 t$ k) X
  </select>
: J. k& M0 A1 O6 [' O; p</td>/ \$ f0 K( T0 {0 @5 z4 y" q
    <td nowrap align="center" class="bgc">5 v, a: O# ^! t) |- [" i
  <input type="button"  value="<<" class="buttons">
5 i7 R# v% m" s$ _7 y3 g5 U  <input type="button"  value=">>" class="buttons">" `  X5 r4 n, y- S! O$ m6 g
</td>9 \' m. j7 f" v. n- ^
    <td>
; R9 g9 ]9 j  C  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">- u- u8 D! u2 a! N8 o
  </select>. |. S' K# B4 p9 n5 H
</td>" c* S. t2 `* L* `" Q& @: O% k0 P2 `
  </tr>
* I5 y7 @9 X+ I  [1 t- ~) M    <tr class="bgc"> ) F9 O: d' D5 t
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
7 v6 w, F$ @- k. B3 Q1 |7 `: O; c  </tr>
" T3 \) _% R8 I+ u: F; T4 V1 W- k$ Z/ \</table>) c3 j& M: M5 c1 s7 b" e
</form>. j6 Q4 P2 U) ~; }2 h( ]9 \
<script language="javascript">$ R" I& j8 _! |& X1 m
//人名移动
% E9 H+ ^0 H9 h2 Vfunction move(fbox, tbox) {9 y3 h/ H/ W2 Q$ r* N4 a% K( r& o) n+ N
var arrfbox = new array();
' {& D4 w; f7 Z  I: A  U5 Ivar arrtbox = new array();; e$ D8 n1 f8 @3 D
var arrlookup = new array();; M% Z5 [" J9 V( N
var i;
6 J% W, m  G! D3 n8 yfor (i = 0; i < tbox.options.length; i++) {7 v! l( X0 Z3 s  L( l) B4 r
arrlookup[tbox.options.text] = tbox.options.value;8 r3 s7 F8 d6 R1 Z: p9 @! y
arrtbox = tbox.options.text;. K- R& V, `; v: z: L5 a
}, a, H/ [  z6 i# R* n: W1 K
var flength = 0;5 C! `% {% S" v: C* T8 `$ r8 p6 y
var tlength = arrtbox.length;8 H% y- ~8 V2 B5 M6 Z6 F$ K5 _3 ^
for(i = 0; i < fbox.options.length; i++) {2 k; w- e" v* O. y- h( q
arrlookup[fbox.options.text] = fbox.options.value;1 Y& A3 u3 e$ e: K
if (fbox.options.selected && fbox.options.value != "") {3 }( ?) W0 j; r9 X* E
arrtbox[tlength] = fbox.options.text;8 N% o2 H, y. K, p
tlength++;! }. g# P: |9 Q0 {
}
  f5 Y: }2 P) [  ]! T% Yelse {& ?; f  v) [8 _% l
arrfbox[flength] = fbox.options.text;
1 @* d/ }7 Z: R+ [" {flength++;
2 f/ l, R0 e2 q8 Z# r7 p, Y   }0 Q6 W! f4 b% R* R% O7 F! q
}/ y+ y7 s- v; g5 n, s0 y% k( ?
arrfbox.sort();! A& t# q4 [# @  o- T! J
arrtbox.sort();, n8 G1 H) j+ V" d6 U& z9 P8 v: T

% [& y9 V1 O4 g' Y& c6 Y: L' Xfbox.length = 0;3 ?7 x* P2 F% a2 k
tbox.length = 0;
  f7 O7 E1 U. j1 x9 b3 rvar c;
3 |" m! o- I& I' E& Cfor(c = 0; c < arrfbox.length; c++) {
: S5 [. K' Z. ]/ y' P7 ~! R2 ovar no = new option();$ o6 i, p# M8 p8 t& |
no.value = arrlookup[arrfbox[c]];* Q9 Z6 K! J3 d! W- ^0 L
no.text = arrfbox[c];
  m5 e- t: ]' B, Kfbox[c] = no;
0 c/ s% f. i/ E* Z}
  @) E0 B: _* I" q, Sfor(c = 0; c < arrtbox.length; c++) {1 R0 y% g: D0 p' F( V! \4 O
var no = new option();' V. P- ~" _; S! J
no.value = arrlookup[arrtbox[c]];1 f6 F( [7 u4 W& Z& h% O( K
no.text = arrtbox[c];
/ m! |2 r' O, k- g+ q' ntbox[c] = no;. P; O. [% g/ q) J1 @6 v
   }
: Q; D/ j! h& w' \}
2 p  ?1 r2 W! J. W0 f. K- E$ B</script>
, C4 H% l' N% Y( n</body>) t# K+ s. `# H6 B8 [. c





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