JQuery实现左右选中
效果：
代码：
<!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.11.0.min.js"></script> <script type="text/javascript"> $(function() { //给第一个按钮派发单击事件 $("#toRight1").click(function() { //把选中的第一个数据移动到右侧 $("#left option:selected:first").appendTo($("#right")); }) //给第二个按钮派发单击事件 $("#toRight2").click(function() { //把选中的数据移动到右侧 $("#left option:selected").appendTo($("#right")); }) //给第三个按钮派发单击事件 $("#toRight3").click(function() { //把所有的数据移动到右侧 $("#left option").appendTo($("#right")); }) }) </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> </td> <td> <select id="right" multiple="true" style="width:100px" size="10"> </select> </td> </tr> </table> </body> </html>
