1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <div> 9 <select style="60px" multiple size="10" id="leftID"> 10 <option>选项A</option> 11 <option>选项B</option> 12 <option>选项C</option> 13 <option>选项D</option> 14 <option>选项E</option> 15 <option>选项F</option> 16 <option>选项G</option> 17 <option>选项H</option> 18 <option>选项I</option> 19 <option>选项J</option> 20 </select> 21 </div> 22 <div style="position:absolute;left:100px;top:60px"> 23 <input type="button" value="批量右移" id="rightMoveID"/> 24 </div> 25 <div style="position:absolute;left:100px;top:90px"> 26 <input type="button" value="全部右移" id="rightMoveAllID"/> 27 </div> 28 <div style="position:absolute;left:220px;top:20px"> 29 <select multiple size="10" style="60px" id="rightID"> 30 </select> 31 </div> 32 </body> 33 <script type="text/javascript"> 34 //双击右移 35 $("#leftID").dblclick(function(){ 36 $("#rightID").append( $("#leftID option:selected") ); 37 }); 38 //全部右移 39 $("#rightMoveAllID").click(function(){ 40 $("#rightID").append( $("#leftID option") ); 41 }); 42 //批量右移 43 $("#rightMoveID").click(function(){ 44 $("#rightID").append( $("#leftID option:selected") ); 45 }); 46 </script> 47 </html>