效果如圖:

代碼如下:

代碼如下:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
<title>多選框傳值</title>
6
<script type="text/javascript">
7
function toRight(){
8
var sel1 = document.getElementById("s1");
9
var sel2 = document.getElementById("s2");
10
for(i=0;i<sel1.length;i++){
11
if(sel1.options[i].selected){
12
var target = true;
13
for(var j=0;j<sel2.length;j++){
14
if(sel1.options[i].text==sel2.options[j].text){
15
target = false;
16
break;
17
}
18
}
19
if(target){
20
var oOption = document.createElement("option");
21
sel2.options.add(oOption,parseInt(sel1.options[i].value));
22
oOption.text = sel1.options[i].text;
23
oOption.selected = false;
24
}
25
}
26
}
27
}
28
function toLeft(){
29
var sel2 = document.getElementById("s2");
30
for(i=sel2.length-1;i>-1;i--){
31
if(sel2.options[i].selected){
32
sel2.remove(i);
33
}
34
}
35
}
36
</script>
37
</head>
38
<body>
39
<table>
40
<tr>
41
<td>
42
<select id="s1" multiple="multiple"
43
style="width: 100px; height: 100px">
44
<option value="1">
45
o1Text
46
</option>
47
<option value="2">
48
o2Text
49
</option>
50
<option value="3">
51
o3Text
52
</option>
53
<option value="4">
54
o4Text
55
</option>
56
<option value="5">
57
o5Text
58
</option>
59
</select>
60
</td>
61
<td>
62
<input type="button" value=">" onclick="toRight();">
63
<br />
64
<input type="button" value="<" onclick="toLeft();">
65
</td>
66
<td>
67
<select id="s2" multiple="multiple"
68
style="width: 100px; height: 100px">
69
</select>
70
</td>
71
</tr>
72
</table>
73
</body>
74
</html>
75

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75
