<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>左右选中.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#toRight1").click(function(){ $("#right").append($("#left>option:selected:first")); }); //移选中的所有 $("#toRight2").click(function(){ $("#right").append($("#left>option:selected")); }); //移所有的 $("#toRight3").click(function(){ $("#right").append($("#left>option")); }); }) </script> <style> input[type=‘button‘]{ width:50px; } </style> </head> <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>