双多选框传值

效果如图：

代码如下：

 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

 

posted @ 2009-09-21 12:22  Jakin.zhou  阅读(224)  评论(0)    收藏  举报