本次讲的是两个表格之间数据的移动，左边的表格移动到右边，并且左边表格移动内容消失。
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title></title> | |
| <style type="text/css"> | |
| select { | |
| width: 100px; | |
| position: relative; | |
| float: left; | |
| } | |
| #div-out { | |
| width: 100px; | |
| position: relative; | |
| float: left; | |
| height: 113px; | |
| /*border: 1px solid black;*/ | |
| } | |
| #div-in { | |
| width: 50px; | |
| /*border: 1px solid red;*/ | |
| margin: 0px auto; | |
| } | |
| input { | |
| margin-top: 22px; | |
| width: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <select id="s1" size="7" multiple="multiple"> | |
| <option>AAA</option> | |
| <option>BBB</option> | |
| <option>CCC</option> | |
| <option>DDD</option> | |
| <option>EEE</option> | |
| </select> | |
| <div id="div-out"> | |
| <div id="div-in"> | |
| <input type="button" value=">>>" onclick="toright()" /> | |
| <input type="button" value="<<<" onclick="toleft()" /> | |
| </div> | |
| </div> | |
| <select id="s2" size="7" multiple="multiple"></select> | |
| </body> | |
| </html> | |
| <script type="text/javascript"> | |
| var opt = document.getElementById("s1").options; | |
| function toright() { | |
| for(var i = 0; i < opt.length; i++) { | |
| if(opt[i].selected){ | |
| // var opt_temp = document.createElement("option"); | |
| // opt_temp.innerText = opt[i].text; | |
| // alert(opt[i].text); | |
| document.getElementById("s2").appendChild(opt[i]); | |
| // document.getElementById("s1").removeChild(opt[i]); | |
| i--; | |
| } | |
| } | |
| } | |
| </script> |
这是往右移动，往左边移动同理。