<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #choice,#box_L,#box_R{ display: inline-block; } #choice{ top: 20px; } </style> </head> <body> <div id="box_L"> <select id="left" multiple size="10"> <option>请选:</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> </select> </div> <div id="choice"> <input type="button" value="------>" onclick="adds()"><br> <input type="button" value="======>" onclick="addall()"><br> <input type="button" value="<------" onclick="restore()"><br> <input type="button" value="<======" onclick="allrestore()"><br> </div> <div id="box_R"> <select id="right" multiple size="10"> <option>请选:</option> </select> </div> </body> <script> var left = document.getElementById("left"); var right = document.getElementById("right"); function adds() { var options = left.children; for(var i =0;i<options.length;i++) { if (options[i].selected === true) { //单选 options[i].selected = false; //这个主要是把选项选过去后取消他的选中状态 right.appendChild(options[i]); } } } function addall() { var options = left.children; for(var i =0;i<options.length;i++) { right.appendChild(options[i]); i--; } } function restore() { var options = right.children; for (var i=0;i<options.length;i++){ if(options[i].selected ===true){ options[i].selected=false; left.appendChild(options[i]); } } } function allrestore() { var options = right.children; for(var i =0;i<options.length;i++) { left.appendChild(options[i]); i--; } } </script> </html>