需求
如上图，实现左右两边的选择菜单可以左右移动，‘>’按钮一次只能移动被选中的一个菜单，‘>>’按钮一次移动所有被选择的菜单，‘>>>’按钮
将所有菜单进行移动，不管是否被选择。
代码实现
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("#left1").click(function(){ 10 $("#leftSelectId option:selected:first").removeAttr("selected").appendTo($("#rightSelectId")); 11 }); 12 $("#left2").click(function(){ 13 $("#leftSelectId option:selected").removeAttr("selected").appendTo($("#rightSelectId")); 14 }); 15 $("#left3").click(function(){ 16 $("#leftSelectId option").removeAttr("selected").appendTo($("#rightSelectId")); 17 }); 18 19 $("#right1").click(function(){ 20 $("#rightSelectId option:selected:first").removeAttr("selected").appendTo($("#leftSelectId")); 21 }); 22 $("#right2").click(function(){ 23 $("#rightSelectId option:selected").removeAttr("selected").appendTo($("#leftSelectId")); 24 }); 25 $("#right3").click(function(){ 26 $("#rightSelectId option").removeAttr("selected").appendTo($("#leftSelectId")); 27 }); 28 }); 29 </script> 30 31 <style type="text/css"> 32 .textClass { 33 background-color: #ff0000; 34 } 35 </style> 36 </head> 37 <body> 38 <table> 39 <tr> 40 <td> 41 <select id="leftSelectId" style="100px" multiple="multiple" size="6"> 42 <option>京东商城</option> 43 <option>苏宁易购</option> 44 <option>淘宝</option> 45 <option>拼多多</option> 46 </select> 47 48 </td> 49 <td> 50 <input id="left1" type="button" value=">" style="50px"/> <br/> 51 <input id="left2" type="button" value=">>" style="50px"/> <br/> 52 <input id="left3" type="button" value=">>>" style="50px"/> <br/> 53 54 <input type="button" id="right1" value="<" style="50px"/> <br/> 55 <input type="button" id="right2" value="<<" style="50px"/> <br/> 56 <input type="button" id="right3" value="<<<" style="50px"/> <br/> 57 58 </td> 59 <td> 60 <select id="rightSelectId" style="100px" multiple="multiple" size="6"> 61 </select> 62 63 </td> 64 </tr> 65 </table> 66 67 </body> 68 </html>