簡易代碼之家

BlogJava :: 首頁 :: 聯系 :: 聚合

:: 管理

157 Posts :: 2 Stories :: 57 Comments :: 0 Trackbacks

雙多選框傳值

效果如圖：

代碼如下：

<!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

<title>多選框傳值</title>
6

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

posted on 2009-09-21 12:22 Jakin.zhou 閱讀(270) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

簡易代碼之家

常用鏈接

留言簿(2)

我參與的團隊

隨筆檔案

文章檔案

搜索

最新評論

閱讀排行榜

評論排行榜