Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
0 e2 j3 k5 w; S* _. J         c pageencoding="gb2312"
3 O$ h. k1 a0 i' I%>: c) `$ u* H( y$ {
<style>
! e3 F+ I# Q; E1 F.f9{ font-size:9pt; }
& k$ e' i5 X) B- m: q0 S.bgc{ background-color:#aecaf9; color: #0033ff }/ p5 S- \1 N3 I; w+ H* e
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;& Y0 ]& b+ I2 r0 g  i
  border-bottom: solid 1px #4e7dc1;1 k  G* [- L8 _3 Y6 g% t
  border-left: solid 1px #aecaf9;7 \/ s3 G' _5 w% w# \! @4 F; u1 \
  border-right: solid 1px #5679bd;! a' I% U; G. `+ E9 E6 g
  padding:1px;
0 o# r! i4 [+ ?  margin:0px;}
- v1 a& z% ]! N' N+ W( a</style>
2 E6 I" X9 j. |" Z+ f+ M<script language="javascript">
& h) M! m+ J3 M! G8 h<!--! I$ @# R  B& f
function rv()) N2 I# j! U- W0 x
{: t$ ~# I; B2 L- o: f
  var val="";
$ X1 D) @' p9 U; L  for(i=0;i<combo_box.list2.length;i++){
* z; r: c" g! V" ~9 _1 `   val+=","+combo_box.list2.value;4 c; Q/ G1 b# |" f
  }5 [" o0 p/ }7 g4 P- r+ L
  if(val.charat(0)==","){1 u# @1 ^* d% P8 t
   val=val.substr(1,val.length);
- k  ^. @2 V. V  }2 A" a7 `) z- \) c
  opener.form1.frecname.value=val;
  o- S% Q8 J8 N% Z% n5 j5 _1 _- ?  self.close();
) B7 L, S) E. Q# H3 V9 }}
: r" j& G, W; n) d& Z; m+ ?, R//-->
* u2 I/ R4 |- T</script>* ]! }8 T! f3 G) W, M; [7 Z
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
. Z) f; i9 l; U3 F. h0 {<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
; \6 [* w- f* _# B5 B6 i8 U. S<%
7 v0 G) o7 b& h9 q" ]; ~5 W; |  cdatasource ds=new cdatasource();  //数据联结bean实例' G6 w  ]$ x- A' p4 Q, H5 H4 `
  java.sql.connection conn=ds.getconnection();
& M$ ?% l- F" F3 w0 [  java.sql.statement stmt=null;/ a1 H# u4 P7 a. k8 X
  java.sql.resultset rs=null;
" U7 l3 r7 V) q  cdatacheck dc=new cdatacheck();5 L: H/ W5 Q  G
%>
( o! z! K& M' ~8 i4 T<%
1 T( U0 x! j! istring 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";- z  E  x7 R- u9 O
stmt=conn.createstatement();
7 y! A$ ]& X+ G, ~. J$ W4 V7 b+ Urs=stmt.executequery(sqlu);
. z# Y/ l  q- v+ _' C! W%>, f/ d% g4 v* v, U
<script language='javascript'>
3 {# _1 f) D+ n' ?7 m9 k/ parr = new array();! a$ ~- F3 \8 t  G2 ]
<%  int temp=0;
% V& H3 m3 R6 T: z, Dwhile(rs.next())
$ S4 L6 I0 n- P% O' z{+ y7 b1 ^3 H4 t1 s9 ^
%>( g: C, R7 R4 X  C1 S$ K
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
( J; K: A- ]+ }5 t9 f( G<%
3 k3 F6 ?/ g+ l1 k' Etemp = temp + 1;
$ \, M1 M6 ]2 i  j0 @}4 S" z4 |% k; P  i3 v- q. h
%>
0 h$ g; b# @: X% o+ T0 g  ]temp=<%=temp%>;. d9 h. V3 j: Z$ \
function changelocation(id){ ) k: ^7 f% r  w/ {- K
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 + E6 y/ f6 ], [% X5 u4 L
var i = 0;
$ {" U4 b# L9 @* K. kdocument.combo_box.city.options[0]=new option('-------','');
) J4 i7 d( a, K: nfor(i=0;i<temp;i++){ ; U2 {0 n, @' f6 L+ f2 c
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 1 k* Z6 l- S& H( ~" n) R: B6 ^/ [
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
; z4 J; ]3 ?/ |, ]6 Q5 P} 8 x5 N+ t5 y: A5 I' W: E
} 9 f) N% g  W: B$ q8 Q6 l( \
}
3 t* t3 `$ V0 P/ O+ r, q</script>
) @8 y3 v; J$ b; `. R! _4 A% E3 W
<form name="combo_box">) z6 @, z' a: v% i1 a9 x
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">2 Z: Q. X" {# Q8 S2 r2 I/ f) M
  <tr height="24">9 A+ u; k2 J9 b) U7 W/ Y, ]: U
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
/ D: [# y0 s% a3 q. j, ]: E8 {    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
6 t7 Q4 V8 f1 `1 B0 j    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>' b: K8 Q% e: E3 B
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
5 a1 J9 S! d% k5 Z+ r  </tr>
* M3 h+ e3 B" Z  <tr> 4 d, a! w7 m# \: U0 B; n" Z6 j, D* S
    <td>& k0 V- Z7 n& Q
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
) [& `4 Q1 l" v6 w3 P  <option value="0">请选择部门 ---></option>
) c: R( P+ \- [6 V, I<%
: d: f/ ^! `9 [8 H' r: J& X    string sqld="select * from tdept";
& C* B" o6 ?1 }+ u/ h( z' Sstmt=conn.createstatement();
. m, _5 p" \( _: u+ Xrs=stmt.executequery(sqld);
7 Q! z3 R8 `% D; n% S. q  zwhile(rs.next())% N) C# k) e" k
{, w( I, R: H) Q: z5 |
%>
" ^5 ]7 E0 F. q  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>7 g- j. H, C/ i/ A! `+ e! |
<%, L  z8 i+ ~; t' [: g
}
- Z9 C9 y( O- y8 E  A% L. V& t%>
2 ]0 l" q5 m& l8 |  </select>9 Z4 k. d; F, U
</td>9 ~7 J( |) l" a( I/ [/ Z# p
    <td>
0 c) A+ C' u) J" \/ K0 M5 `  <select multiple id=city style="width:150;height:200" class="bgc">
6 q& Q1 {1 D6 s1 e3 o0 J6 Q; [  </select>
% }4 H! K8 ^4 S</td>
( ^5 e- n# A( s8 d) N, j- e    <td nowrap align="center" class="bgc">
; o( Z! y2 _' J. M4 m  <input type="button"  value="<<" class="buttons">/ _# T0 Y" z. F( m
  <input type="button"  value=">>" class="buttons">
0 O8 A" @- Q0 ?</td>
! U* W; J, R! q, f9 _+ H( _    <td>% y3 R  ]2 D7 S7 L2 D8 x5 D
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">) S2 |0 n- P2 ?/ y9 \) G
  </select># A8 v! J" f) Q) l; P
</td>
" e) {# t6 E* P- q. A+ c9 F  </tr>7 R: r8 e! P3 r& z
    <tr class="bgc">
2 u+ b8 h( U  O    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
# q5 r2 n: E' n$ l$ B! ^  </tr>
5 e8 |) R6 H/ E: K</table>
& w5 m1 c4 M* w1 ^& Q+ U</form>& s- c# s+ R& h; P- d
<script language="javascript">: U2 R4 w& `' ^; {. Q. l
//人名移动
6 p9 R, p, Q( P& wfunction move(fbox, tbox) {2 b8 p& g" A9 w5 d$ d) s! d
var arrfbox = new array();" R3 W9 }& N% y9 m: I) Z: N
var arrtbox = new array();
9 t2 `* d! F  G7 u' S2 Rvar arrlookup = new array();4 t: n0 M$ }# V+ T
var i;! c! ?5 q  |( l# E
for (i = 0; i < tbox.options.length; i++) {. _4 W0 [1 t- F$ b8 q$ Q! B. J
arrlookup[tbox.options.text] = tbox.options.value;
% {3 T. ^; y4 M0 ]$ C4 _- W$ Sarrtbox = tbox.options.text;0 s/ y  L, W0 Z( ]: X6 W; k: I; r- D* p
}
. }/ w2 O/ u% }9 f0 B. @+ V% Svar flength = 0;" c( S( m: k5 _7 [7 k3 W
var tlength = arrtbox.length;* `" f+ @, V) j/ ~3 b( R, S$ _
for(i = 0; i < fbox.options.length; i++) {
  n2 A6 k9 ]* ?( K8 q2 M& X0 larrlookup[fbox.options.text] = fbox.options.value;
# J; }1 s+ x# l' I- ~if (fbox.options.selected && fbox.options.value != "") {
/ Q! y' S9 Q4 ]( \1 Barrtbox[tlength] = fbox.options.text;  `+ r4 T& P# D# t! u; Q
tlength++;
/ X3 p1 Y6 E6 p' A& f# c}' {4 ?4 y: F8 B7 q0 p7 z* |
else {+ C+ d* P/ \3 H/ |! L
arrfbox[flength] = fbox.options.text;  a  @4 b/ s0 }- l, \+ e8 R6 Y
flength++;$ n- A. f$ ?/ G
   }
7 D5 h/ z0 `# u0 ~* V) K0 }}" C# Q0 |+ ]! M; {; n2 ?
arrfbox.sort();4 f9 o9 I. b" N6 E2 w* [" _$ w
arrtbox.sort();* }/ x, Q- H+ L8 g% T# c; X

$ e9 f8 A  Y" e& J' K- m+ b( C  jfbox.length = 0;
  y4 u8 o# d8 u6 h, Ctbox.length = 0;, l7 u- }" F, q1 K  K
var c;" C/ H" s9 f2 w
for(c = 0; c < arrfbox.length; c++) {
* G: w3 W" O$ n/ S4 `* X: U" @var no = new option();
, |( n# d) \4 \no.value = arrlookup[arrfbox[c]];' H# g+ R- u9 b! V9 D6 E. D  m
no.text = arrfbox[c];
  f  t% Z' L; w( Jfbox[c] = no;
  M5 N. q8 x( U* d}
; B$ ?" S/ ^' g( j2 W4 Y4 @for(c = 0; c < arrtbox.length; c++) {5 U. U9 n$ }7 @9 C" A4 T
var no = new option();
# n: u" R! E; O" _2 M9 E7 I& g" Ano.value = arrlookup[arrtbox[c]];1 z. q; Q1 B: ~
no.text = arrtbox[c];
7 n: |/ _4 g! ytbox[c] = no;" S* g4 P' n% I  r
   }
$ }. ]$ u* o2 v/ B; L}
, X$ Z) P" b8 D) l( ^</script>: ~9 Q+ E9 i/ g6 @; k, x& \
</body>- V+ x7 F1 f) Y: E/ t* z( z' `





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