jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;") a" s- w  S* u
      c pageencoding="gb2312"
%>; ~' Z  Z: u0 y* w
<style>
.f9{ font-size:9pt; }" a' r8 @; a3 {% @$ `" `
.bgc{ background-color:#aecaf9; color: #0033ff }+ N7 J  R. Y. N5 R
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
  border-bottom: solid 1px #4e7dc1;+ D. d$ h0 |5 b$ H) B4 {
  border-left: solid 1px #aecaf9;1 u' O1 h% j* Y
  border-right: solid 1px #5679bd;/ l: F, y* N1 K- G( V* E
  padding:1px;0 k( Y- W0 C( A& x; p
  margin:0px;}
</style>
<script language="javascript">
, Q3 k5 h6 S+ R: f) T" v& P) Q
</script>  Q. [" R9 i* s0 Z
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
3 ]) L, g6 e$ j% i+ Y$ z<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
8 q4 [# o8 V: J$ e" k<%
* W- P) C0 {: u# M  cdatasource ds=new cdatasource();  //数据联结bean实例
: w* H; t" S2 S1 U% t" i  java.sql.connection conn=ds.getconnection();
  D: t% v* j. I8 r9 f( r; P  java.sql.statement stmt=null;
7 Z0 W9 V9 S: C0 {' U$ J0 d  java.sql.resultset rs=null;
$ z, ~! |- C  ^: I8 p. ^  cdatacheck dc=new cdatacheck();( _2 V" q( `) B( X
%>. Z: R4 }, B: `; q! g% ~1 ?$ i) j
<%$ t. D1 t$ n% {& |6 {
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";
2 w7 N7 e- Y$ Q& T0 [4 Vstmt=conn.createstatement();6 T! Z7 c* n$ i3 z; z
rs=stmt.executequery(sqlu);
! ?% c7 F( Q1 {8 \%>
8 w4 I$ |; f- I+ q5 m& x7 ^3 ]: v7 ?8 e<script language='javascript'>. s) ^! E, m9 n" Q. `4 ?$ X
arr = new array();, i, j- M; @& H% O  a) ^9 V1 p
<%  int temp=0;
# {" K3 \# d3 _$ y3 B! x5 @while(rs.next())
' A4 F' j. N, R4 K9 r. T* {/ [{+ a. Y. o: H- H' |* i* `
%>
* }+ F! I( @' n& p$ ~arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
, O2 v. ~) L, v2 V7 |: X. ~<%
# f  `, e2 P* l  m" M7 N0 ~temp = temp + 1;
: H0 v5 `8 @5 s, N3 V' Z}: w8 k3 d& J, Y: e% A
%>
8 F4 ]4 {  x; E' htemp=<%=temp%>;+ R9 C1 d. O1 B+ J8 n
function changelocation(id){
2 @5 }' u$ ]- h8 ]) ]document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 + i( g$ r0 d2 t8 v1 H0 y
var i = 0; ( b& g8 }# B' f" I5 U
document.combo_box.city.options[0]=new option('-------',''); 6 q+ k1 g- K/ n4 a# j
for(i=0;i<temp;i++){ ( N9 y- Q: ^3 y4 y
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
9 v) a* `  C1 G1 T9 m9 T: ^! Adocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); ) G6 d1 N- g6 C- e* Y% C
}
9 T, N+ Z/ [" X3 V: w! m}
+ p0 l4 H3 G! G8 B}
- i7 v& W! F9 P9 t0 V</script>
1 c5 @! F, K" r) V- b+ O/ S8 y) `( d; G
<form name="combo_box">
+ B4 [8 M* G" p/ ^<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
8 a( k" u: Z. d5 S; h1 C  <tr height="24">
5 @: K1 ^) e7 z0 i1 X <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
" o& L6 x4 Q5 N$ c- W <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>: n3 @$ l1 N. f+ ?% D9 t& G( h
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
' j1 R  g* `8 L1 w+ c <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>6 Y3 ^0 o) |+ U5 o+ \( Z
  </tr>
' i5 m: w- W) W" z( _  <tr>
& I) c9 \4 k' U6 v9 o. @ <td>% Z1 s" a+ F1 C1 J& v- [7 g5 i
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" h& {2 z( ?, _! P+ t  <option value="0">请选择部门 ---></option>
0 ~' p3 r) s: m. N, @! q<%; x+ {. k) T& H, D
string sqld="select * from tdept";! C7 g5 ~# a: I+ v! d0 }# v
stmt=conn.createstatement();( s5 a$ g" |( M8 W6 P- Y
rs=stmt.executequery(sqld);/ I* ~" O3 @/ H* o/ C
while(rs.next())( V7 L$ E* X0 ]' a5 [
{; E6 B2 o6 z9 W& z0 Q! H
%>7 h. m% z( A; j3 \
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
2 ^8 y! f# \* @8 ]$ Y<%
/ z* }; e0 I) P1 Y$ ?8 m2 v+ U}5 S, H5 Q' w& O" w) `
%> 4 w/ u' }+ m. j( R
  </select>
/ s# r9 c% c+ ]5 O9 a</td>
8 C5 ?, ~  k, X9 L <td>* H+ |% M: l& R8 _5 q3 m
  <select multiple id=city style="width:150;height:200" class="bgc">
6 Y4 ]- b5 Q- P/ d% j7 z& z  </select>
) W7 e# t& r- s6 p) u+ r; p% v</td>7 {; T  o% A' W, r3 v
<td nowrap align="center" class="bgc">; |1 y, ]* x; ]) ~5 \  Y% ^: n6 w
  <input type="button"  value="<<" class="buttons">0 R' q: r) n: z) ]2 x6 E
  <input type="button"  value=">>" class="buttons">
+ s! Q7 q+ B% [5 a" G% Q</td>; j) }2 k. r8 o3 q* T# W0 K: S
<td>
% e! y6 j1 X% w6 _) b; U0 l& s  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
: N( h4 H4 r  g3 w/ [; ~" Y  </select>* @' p7 |0 d: N
</td>6 ~! V/ [/ ^9 u
  </tr>
5 E/ p3 Z7 z1 j/ ^" n <tr class="bgc"> 2 K8 E& C: s; Z6 ?' b
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>8 y+ V/ @/ g0 U5 z
  </tr>
& B- ]. u( |2 ?+ I</table>4 I1 H" X0 N9 o9 |, C* o8 h
</form>
; e" f5 q) j, A0 g* v/ N- V<script language="javascript">
6 R+ }, N( d( B//人名移动* `$ g7 O8 F( h7 i& C& C" W
function move(fbox, tbox) {
  A3 ^: C' I2 ]+ Pvar arrfbox = new array();- n( Q. f3 _3 y2 ^: [
var arrtbox = new array();8 W" A) g. Z6 k) F, M7 i9 ?' K; D, ^+ [
var arrlookup = new array();
" O1 `  W) U  }" xvar i;
. A( u" q7 K. w7 R, dfor (i = 0; i < tbox.options.length; i++) {
$ j/ }8 y' x6 z1 narrlookup[tbox.options.text] = tbox.options.value;
: |2 j; I1 Y; G" ]  j1 r3 `arrtbox = tbox.options.text;9 r  ?; ~" Q& H% n# W
}
. E( U0 p3 q" g- vvar flength = 0;' p0 i3 T6 {' H$ X1 A& v1 o4 b8 B
var tlength = arrtbox.length;( V! n9 [. a- P( H( f- y/ u/ Q
for(i = 0; i < fbox.options.length; i++) {
% b$ X# G( Q- \* a1 sarrlookup[fbox.options.text] = fbox.options.value;
" _/ A1 |' s" O: v  tif (fbox.options.selected && fbox.options.value != "") {8 F' ~* z+ ^; r  A& i( I0 V( d0 P$ U
arrtbox[tlength] = fbox.options.text;0 R6 z! q  L6 |8 e& J' n& N7 P
tlength++;# D/ ^$ X. C2 L: O8 L2 ]+ K( t
}  I" s  p  X: F6 F
else {
* w( F% o) g4 o: f( ]" q  q4 Qarrfbox[flength] = fbox.options.text;7 p/ u0 t- b! a3 G5 z0 W3 ]
flength++;
; @$ s/ T7 {  K: Y }+ A, D4 \  I2 k2 H8 k$ C
}
* j& w4 o# R' x3 B9 T3 zarrfbox.sort();
2 i: Q7 l  }+ w) e. Garrtbox.sort();
! h5 y( U+ O% ]$ N! Z! e1 l" ?% \% X  T
fbox.length = 0;
/ b. }# B7 |1 O& Stbox.length = 0;
0 p6 B  N. [& ^9 b7 u* w& d  Lvar c;
' E( s8 B4 I8 I# wfor(c = 0; c < arrfbox.length; c++) {7 M8 `: A' i1 ^; r) J4 j
var no = new option();# F* p( Y' @* x& m! r% e, y) m4 {
no.value = arrlookup[arrfbox[c]];
# `" z: L! X, D4 Gno.text = arrfbox[c];2 p8 o  G) u; Z5 }
fbox[c] = no;
5 ~# L$ r9 z# Q* I- ?}7 ]3 N2 D! P0 d" B* E
for(c = 0; c < arrtbox.length; c++) {
6 a# }/ I: W+ w8 ?) L' ]( Jvar no = new option();% x* w+ ~8 K0 S6 `, H$ A% W! q
no.value = arrlookup[arrtbox[c]];
! u* S$ a  Q4 r( U& C& |no.text = arrtbox[c];$ y5 `% [4 |1 a! z
tbox[c] = no;
$ j4 ]; t& q  v" Z* Q$ N3 @ }
8 m+ j! O$ P9 M, D# Q}8 F4 k& X2 ?$ P& |. _: b7 W; Y
</script>
4 x' q2 ~; e/ h6 Y6 }</body>

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

返回列表

jsp+javascript打造级连菜单

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

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