jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"3 E: O4 x4 [  }# r2 |- o' R3 D
      c pageencoding="gb2312"
%>
<style>
.f9{ font-size:9pt; }3 R2 v# F. ~6 N: J  d: z
.bgc{ background-color:#aecaf9; color: #0033ff }. O$ h$ `$ I7 D$ L  g! j8 B$ s! L0 ~. P
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;! O, A* W9 d$ T/ H; T
  border-bottom: solid 1px #4e7dc1;  _) ]( i, T$ W- }7 u9 `4 g3 o, P
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;1 |: d8 b! Z) ~6 w/ I2 W
  padding:1px;
  margin:0px;}
</style>
<script language="javascript">0 u3 K5 a% Y, j4 x& G5 }
- |5 q1 \5 K' A6 p6 ?( {
</script>- y0 y- R7 O9 x: w- i
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 c. L# C4 c  ?2 Y( j/ A<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
9 e+ p$ [& R' c" S( g<%3 k( u8 Z5 M, B$ b
  cdatasource ds=new cdatasource();  //数据联结bean实例* q! [9 i) e, v* P# Q
  java.sql.connection conn=ds.getconnection();
7 s# [% `3 L2 E5 C8 ?! R/ f  java.sql.statement stmt=null;
7 d$ c: L2 o) D' L& u, N+ ?& F  java.sql.resultset rs=null;
6 |$ G5 v* V/ O2 q1 \3 l  cdatacheck dc=new cdatacheck();! q" G' I" ?) s$ h3 Y% T3 y  O
%>
" v  S0 r2 U5 T0 \- @" `( Q7 _% r<%
1 N0 R- c( J4 B- H/ _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";9 o. y4 B5 r. B* E
stmt=conn.createstatement();5 a, x$ H6 O! h( q+ `
rs=stmt.executequery(sqlu);& `5 k# L/ N# M( B
%>' d5 ~4 @& R, n
<script language='javascript'>
0 r. g0 t7 K+ m  Rarr = new array();
: W; U' ?. j- j2 i- Z<%  int temp=0;
3 U0 h7 g  o) Q7 Cwhile(rs.next())
0 m( q" o  V  i9 z2 l{$ h! R. Z6 D0 v4 e% j
%>
2 |2 M) M5 R" rarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");! l" |+ S# E2 s& g1 a) `
<%
5 Y+ c% f, o- a$ mtemp = temp + 1;4 d3 F! Y  [$ }/ i" ?
}. }' X) E6 W* Y1 \" R. y
%>' E4 N$ J5 _+ m& I; |
temp=<%=temp%>;8 |8 D, ?0 @3 S" t1 x1 }; F; B0 G% P
function changelocation(id){ , w( I; k* B; x; {- C/ x3 ]$ u
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
. K* p7 h; M5 B- Ovar i = 0; + _: E6 ]4 A% F7 g
document.combo_box.city.options[0]=new option('-------',''); % y" }) R9 c( ~1 D8 M) s. G
for(i=0;i<temp;i++){ 7 Z8 L8 }9 d, B0 w* j2 \
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] % w, A0 ^( D6 ~
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
* i( P/ k+ u5 }# ]}
9 D, s3 j( O: I* m# B} : Z7 D: ]6 \8 r' ~2 j5 b
} ! p& F1 P8 z8 Q; k. V+ w, ~( w
</script>! N$ j! d4 Y7 j: `6 [. T# V( d

. c8 Q2 p( I: `2 o! c<form name="combo_box">
( ~: U+ m) W5 o' r2 m. s<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">! R1 L' y% Y! p3 p
  <tr height="24">
* f! {9 P+ r* N; @ <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
* T6 {* m( e' M% ~. g* V$ g+ a <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>: ?" R1 W: }+ c5 K9 o
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td># S% P; q1 ^: n3 ~
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>4 T5 Z* ?# R! b. `$ T
  </tr>* t5 y7 e, n' Y% U( q5 J
  <tr>
2 C. @- l  R( C. A( W0 A) g- C <td>
- p- x# e5 ^! W# t; Q2 v3 S  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">% _  x* e7 x4 I+ [1 j# q
  <option value="0">请选择部门 ---></option># e- N! O" S+ h8 N
<%( m7 m3 w) e2 i' ]
string sqld="select * from tdept";
" i  j% a2 ?3 z7 `* U2 y- Vstmt=conn.createstatement();
- J/ @7 \- u( nrs=stmt.executequery(sqld);/ `- }" J6 n7 t0 K8 W
while(rs.next())
8 W: Q* k) l" k{
0 `* R( I/ W7 S2 _% e%>
7 A  |1 `8 v5 F! x8 y  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>4 \! f# a. @' l1 F  S# X6 s
<%
9 }8 c. x, n7 C' W$ k7 |& S* }}9 F2 |* h1 D$ e9 V
%> 0 d; G% X5 k4 Q. T# a
  </select>; y5 ?( J2 p- t" ^! ^  ^! l. b# p5 y
</td>
$ x1 a# d8 A5 n% ^0 P; O <td>
8 S* \# ^3 j9 r3 I9 e2 i  <select multiple id=city style="width:150;height:200" class="bgc">
, Q( G3 y" z% Y. W4 E  </select>% [% o4 b# Y% q7 ?8 g
</td>/ u$ a6 T8 R0 C: }1 w% S
<td nowrap align="center" class="bgc">2 A- n0 m0 Q7 ~9 c, h1 _
  <input type="button"  value="<<" class="buttons">/ J7 }8 m2 ~- |9 E2 i" g
  <input type="button"  value=">>" class="buttons">
  U& Z2 C1 U" r$ i1 }</td>$ r) ~6 |1 y) j  x- X# M! c$ p3 R
<td>
, z- G4 S/ F+ B: A8 |  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">( v% e- ]1 H: m5 h( Q
  </select>6 X5 F8 L# M$ v0 j, I
</td>
$ w, X: j  C% M0 M: L: ~/ U  </tr>
# h. s7 S  ?5 {7 E" C5 g- | <tr class="bgc"> , p5 Q0 Q9 G' l- A: _$ ~! u, g* X
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
3 k! ?' O) F  I: Z  </tr>
5 K: z8 ^& |" ~</table>5 I" |: _3 Y4 [& ^
</form>
; A2 l; C- O8 n. J/ Q4 ]" G<script language="javascript">$ j% a: E5 W1 M( T7 R
//人名移动% ?5 i1 c0 J8 g6 m& |
function move(fbox, tbox) {2 h8 h0 f* ^9 s: C/ Y7 C
var arrfbox = new array();
0 W& n; m1 E9 @; C1 Y. t7 gvar arrtbox = new array();
# a% e% C6 R' b0 D9 ~4 jvar arrlookup = new array();7 u9 N+ M1 u( \2 d' b; t  e
var i;8 j, F. j; o, g$ ~
for (i = 0; i < tbox.options.length; i++) {" c) Q1 I, d0 h! W1 l
arrlookup[tbox.options.text] = tbox.options.value;$ s+ {4 r6 y. m1 _0 ?: g
arrtbox = tbox.options.text;
7 K/ q( c$ {! F: G4 Z9 R+ w* U}
" F8 J+ e1 j8 V  _8 A- Kvar flength = 0;
7 F9 w5 W0 V: ^7 V; W  B( q3 g/ lvar tlength = arrtbox.length;
# \; N, \& e7 Q  _for(i = 0; i < fbox.options.length; i++) {: d  V6 b! i/ {; J; R4 [
arrlookup[fbox.options.text] = fbox.options.value;
& Y* \, \. q0 J2 d* O' d* Mif (fbox.options.selected && fbox.options.value != "") {
' ], ~- {1 p% x1 O. g! K3 jarrtbox[tlength] = fbox.options.text;
; Z$ v$ L3 Y& Q. d# ?tlength++;# R$ ?8 ?0 ~2 i& d
}
3 |$ r' u% Z; }+ P: f) V% v& q" `0 Y' _else {
  M$ V" Q/ M. Z! @) yarrfbox[flength] = fbox.options.text;
, a3 x0 ?' j2 a0 B( _: I* kflength++;
. w$ {" T9 T/ }4 }! w1 y! l9 {) b }) l8 [" m4 t1 O" ?2 C
}! @+ r1 [$ k' w. K  H6 d
arrfbox.sort();; [9 W, j# J/ L
arrtbox.sort();
9 p% Q* w/ n4 U/ X, ~* F: A
" x! D; L# u, ^; w# B, Lfbox.length = 0;: p8 R$ W6 v# D
tbox.length = 0;
+ I& P5 Q3 j! S6 ?: X$ Tvar c;
3 ^$ X4 p) p" o% M. H! ]for(c = 0; c < arrfbox.length; c++) {
; q$ t- N; q0 vvar no = new option();1 Q: D, J* F" o. ?, t# O1 |" `
no.value = arrlookup[arrfbox[c]];, o! Y+ t& E( S
no.text = arrfbox[c];
& S2 ~. F+ D# }6 _$ Ffbox[c] = no;
2 U: X& H$ O$ _" z: U: }}) y2 y2 x- h2 T! o9 @5 E
for(c = 0; c < arrtbox.length; c++) {
: ?/ _& o  _8 ]var no = new option();+ [; L: Y* H3 O! O$ f
no.value = arrlookup[arrtbox[c]];8 x6 ?- o9 W; N+ ?( i4 o
no.text = arrtbox[c];$ ~& I0 W# B% E; l3 p
tbox[c] = no;
' H! e; y6 M# r. [, j }
; ^, V2 R! A: l6 K/ v* f' ]/ v) z}9 ~6 Y" K7 ?$ ^" C, l: T
</script>
, j8 H. _2 M- R- F# I</body>( L) E3 s' |% p4 c, d

捌玖网络 89w.org----致力于站长学习交流

返回列表

jsp+javascript打造级连菜单

[收藏此主题] [关注此主题的新回复]

[通过 QQ、MSN 分享给朋友]