码迷,mamicode.com
首页 > 移动开发 > 详细

列表框的左右移动

时间:2015-10-14 21:23:25      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!-- <script type="text/javascript"> 
 2 function move(a,b) 
 3 { 
 4    var aObj = document.getElementById(a); 
 5    var bObj = document.getElementById(b); 
 6    for(var i=0;i<aObj.length;i++) 
 7    { 
 8       if(aObj[i].selected) 
 9       { 
10          var opt = new Option(aObj[i].text,aObj[i].value); 
11          bObj.add(opt); 
12          aObj.remove(i); 
13          i--; 
14       } 
15    } 
16 } 
17 </script> 
18 <table width="40%" border="1" bgcolor="#cecece"> 
19    <tr> 
20       <td><select id="left" size="6" multiple> 
21          <option value="1">增加简历</option> 
22          <option value="2">删除简历</option> 
23          <option value="3">修改简历</option> 
24          <option value="4">列表简历</option> 
25       </select></td> 
26       <td><input type="button" value=">>" 
27          onclick="move(‘left‘,‘right‘)"><br> 
28       <input type="button" value="<<" 
29       onclick="move(‘right‘,‘left‘)"></td> 
30       <td><select id="right" size="6" multiple style="width: 80px"> 
31       </select></td> 
32    </tr> 
33 </table> 
34  -->
35  <!DOCTYPE html>
36  <html lang="en">
37  <head>
38      <meta charset="UTF-8">
39     <title>Document</title>
40      <!--引入框架-->
41     <link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet">
42     <script src="resource/jQuery/jquery-1.11.3.js"></script>
43     <script src="resource/bootstrap/js/bootstrap.js"></script>
44 
45     <!--引入自己的js-->
46     <script src="js/demo1.js"></script>
47 
48     <style>
49         /*css选择器:class,id,标签,复合选择器*/
50     </style>
51  <body>
52      <script type="text/javascript"> 
53     function move(a,b) 
54     { 
55        var aObj = document.getElementById(a); 
56        var bObj = document.getElementById(b); 
57        for(var i=0;i<aObj.length;i++) 
58        { 
59           if(aObj[i].selected) 
60           { 
61              var opt = new Option(aObj[i].text,aObj[i].value); 
62              bObj.add(opt); 
63              aObj.remove(i); 
64              i--; 
65           } 
66        } 
67     } 
68     </script> 
69     <table width="40%" border="1" bgcolor="#cecece"> 
70        <tr> 
71           <td><select id="left" size="6" multiple> 
72              <option value="1">增加简历</option> 
73              <option value="2">删除简历</option> 
74              <option value="3">修改简历</option> 
75              <option value="4">列表简历</option> 
76           </select></td> 
77           <td><input type="button" value=">>" 
78              onclick="move(‘left‘,‘right‘)"><br> 
79           <input type="button" value="<<" 
80           onclick="move(‘right‘,‘left‘)"></td> 
81           <td><select id="right" size="6" multiple style="width: 80px"> 
82           </select></td> 
83        </tr> 
84     </table> 
85 
86  </body>
87  </html>

 

列表框的左右移动

标签:

原文地址:http://www.cnblogs.com/zzzzw/p/4878422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!