<!DOCTYPE html> <html> <head> <title>checkbox练习</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> window.onload = function() { /* 关于功能实现 1.怎样可以让左边的一项移动到右边? 怎样得到select中的选中项? select.options;----得到所有的option的数组. select有一个属性叫selectIndex。得到被选中项的索引. var option=select.options[select.selectIndex]----得到了被选中的项。 rightSelect.add(option); */ //向右移动一个. document.getElementById("removeRightOnly").onclick = function() { //得到左边select中选中的项. var left = document.getElementById("left"); //得到左边的select var option = left.options[left.selectedIndex]; //得到左边选的项. document.getElementById("right").add(option); }; /* 2.怎样将左边的全部移动的右边。 options得到全部，编列所有的，使用rightSelect.add将所有的添加到右边就可以。 */ document.getElementById("removeRightAll").onclick = function() { //得到左边的全部 var left = document.getElementById("left"); var ops=left.options; //得到左边全部的option //遍历每一个option，将其添加到右边. while(ops.length>0){ document.getElementById("right").add(ops[0]); } }; } </script> </head> <body> <table align='center'> <tr> <td><select size="10" id="left"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> <option>选项9</option> </select></td> <td><input type="button" value="--->" id="removeRightOnly"><br> <input type="button" value="===>" id="removeRightAll"><br> <input type="button" value="<---" id="removeLeftOnly"><br> <input type="button" value="<===" id="removeLeftAll"><br> </td> <td><select size="10" id="right"> <option>选项10</option> </select></td> </tr> </table> </body> </html>