1.确定事件，按钮的单击事件
2.编写函数：
点击移动单个的：
a.获取左边选中的选项 select对象.option --数组
遍历数组 判断是否选中 option对象.selected
b.将其追加到右边的下拉选中
rightSelect对象.appendChild（option)
点击移动所有的
a.获取左边的所有选项
b.将其一个个追加到右边下拉选中
<html> <head> <title>左右选中.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> </script> <style> input[type=‘button‘]{ width:50px; } </style> </head> <script> onload = function(){ //单选左右选中，给单移按钮派发事件 document.getElementById("toRight1").onclick = function(){ //获取左边所有的option var arr = document.getElementById("left").options; for(var i = 0; i<arr.length;i++){ //判断选中状态 if(arr[i].selected){ document.getElementById("right").appendChild(arr[i]); break; } } } //多选左右选中，给多移按钮派发事件 document.getElementById("toRight2").onclick = function(){ //获取左边所有的option var arr = document.getElementById("left").options; for(var i = 0; i<arr.length;i++){ //判断选中状态 if(arr[i].selected){ document.getElementById("right").appendChild(arr[i]); } } } //全选左右选中，给全移派发事件 document.getElementById("toRight3").onclick = function(){ //获取左边所有的option var arr = document.getElementById("left").options; for(var i = 0; i<arr.length;){ document.getElementById("right").appendChild(arr[i]); } } } </script> <body> <table> <tr> <td> <select id="left" multiple="true" style="width:100px" size="10"> <option>環</option> <option>芈</option> <option>琅</option> <option>琊</option> <option>爨</option> <option>甄</option> <option>槑</option> <option>夔</option> </select> </td> <td> <input type="button" value=">" id="toRight1"><br> <input type="button" value=">>" id="toRight2"><br> <input type="button" value=">>>" id="toRight3"><br><br> <input type="button" value="<" id="toLeft1"><br> <input type="button" value="<<" id="toLeft2"><br> <input type="button" value="<<<" id="toLeft3"> </td> <td> <select id="right" multiple="true" style="width:100px" size="10"> </select> </td> </tr> </table> </body> </html>
原文：https://www.cnblogs.com/yisennnn/p/13276538.html