能够实现的效果如下图片: 主要的html代码: <body> <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"> <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;" mce_style="margin:15px 0px 0px 15px;"> <tr> <td width="126"> <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度--> <select name="first" size="10" multiple="multiple" class="td3" id="first"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="left"> <select name="second" size="10" multiple="multiple" class="td3" id="second"> <option value="选项9">选项9</option> </select> </td> </tr> </table> </div> </body> JQuery代码: //选中从左边的到右边 //<input name="add" id="add" type="button" class="button" value="-->" /> $("#add").click(function(){ $("#second").append($("select[name=first] option:selected")); }); //左边全部移动到右边 //<input name="add_all" id="add_all" type="button" class="button" value="==>" /> $("#add_all").click(function(){ $("#second").append($("select[id=first] option")); }); //选中从右边的到左边 //<input name="remove" id="remove" type="button" class="button" value="<--" /> $("#remove").click(function(){ $("#first").append($("select[id=second] option:selected")); }); //右边全部移动到左边 //<input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> $("#remove_all").click(function(){ $("#first").append($("select[id=second] option")); }); //双击从左边到右边,或者为 $("#first")增加事件也是可以的 $("select[name=first]").dblclick(function(){ $("#second").append($("select[name=first] option:selected")); }); //双击从右边到左边,或者为 $("#second")增加事件也是可以的 $("select[name=second]").dblclick(function(){ $("#first").append($("select[name=second] option:selected")); });