这段代码非常的简单，仅仅作为自己的一个小小的记录！
ok，先上一个简单的图例，效果如下（注意：这只是一个简单的例子，不过可以根据这个简单的例子，变化出更为复杂的效果）！
代码也非常的简单，如下所示（注意：图片的路径是在我的小例子中的，表的样式也有待自己的调整，还有许多的样式文件和jQuery的JS文件没有包含在代码中，此代码主要是一个记录一个样例！）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>例子</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Cache-Control" content="no-store"/> <meta http-equiv="Pragma" content="no-cache"/> <meta http-equiv="Expires" content="0"/> <style type="text/css"> .selcet1 { border:#CCC solid 1px; padding:3px; margin:0px; font:14px; width:250; min-width: 83px; } </style> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ //点击添加按钮 $(‘#add‘).click(function() { $(‘#leftIdList option:selected‘).remove().appendTo(‘#rightIdList‘); }); //点击删除按钮 $(‘#delete‘).click(function() { $(‘#rightIdList option:selected‘).appendTo(‘#leftIdList‘); }); //双击事件 $(‘#leftIdList‘).dblclick(function() { //we will delete the options of the leftIdList when the rightIdList include the same options var rightIdListLength = $(‘#rightIdList option‘).length; $(‘#leftIdList option:selected‘).each(function(){ for(var i=0;i<rightIdListLength;i++) { if($("#rightIdList option[index="+i+"]").val()==$(this).val()){ $(this).remove(); } } }); $(‘#leftIdList option:selected‘).appendTo(‘#rightIdList‘); }); $(‘#rightIdList‘).dblclick(function() { //we will delete the options of the rightIdList when the leftIdList include the same options var leftIdListLength = $(‘#leftIdList option‘).length; $(‘#rightIdList option:selected‘).each(function(){ for(var i=0;i<leftIdListLength;i++) { if($("#leftIdList option[index="+i+"]").val()==$(this).val()){ $(this).remove(); } } }); $(‘#rightIdList option:selected‘).appendTo(‘#leftIdList‘); }); }); function getIdList() { var optionstring = ""; optionstring += "<option value=\"001\" >001</option>"+ "<option value=\"002\" >002</option>"+ "<option value=\"003\" >003</option>"+ "<option value=\"004\" >004</option>"+ "<option value=\"005\" >005</option>"+ "<option value=\"006\" >006</option>"+ "<option value=\"007\" >007</option>"+ "<option value=\"008\" >008</option>"+ "<option value=\"009\" >009</option>"+ "<option value=\"010\" >010</option>"; $("#leftIdList").html(optionstring); } //调用Ajax功能，这个方法是待用的，在实际的项目中使用 function getIdList_() { $.ajax({ type : "post", url : "/acode/getIdList.action", data:{id:function(){return $("#id").val();}}, dataType : "json", error:function(){ alert("没有对应的数据，请查看输入的查询条件！"); }, success : function(data) { if (data.length == 0) {return;} var optionstring = ""; for ( var i = 0; i < data.length; i++) { optionstring += "<option value=\""+ data[i].id +"\" >"+ data[i].id+"</option>"; } $("#leftIdList").html(optionstring); } }); } </script> </head> <body> <table> <tr> <td align="left">待选学号</td> <td width="81"></td> <td class="notNull" align="left">已选学号</td> </tr> <tr> <td width="83" align="left"><input id="id" class="input-w-95-1" type="text" onkeyup="getIdList()"/></td> <td width="81"></td> <td></td> </tr> <tr> <td width="83" ><select name="ids_" multiple="multiple" class="selcet1" id="leftIdList" style="width:200;height:100px;"></select></td> <td width="81"> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td><img onmouseover ="this.src=‘/acode/images/button/d-tj-2.gif‘" onmouseout="this.src=‘/acode/images/button/d-dt.gif‘" src="/acode/images/button/d-dt.gif" width="81" height="25" id="add"/></td> </tr> <tr> <td><img onmouseover ="this.src=‘/acode/images/button/d-sc-2.gif‘" onmouseout="this.src=‘/acode/images/button/d-sc.gif‘" src="/acode/images/button/d-sc.gif" width="81" height="25" id="delete"/></td> </tr> </table> </td> <td><select name="ids" multiple="multiple" class="selcet1" id="rightIdList" style="width:200;height:100px;"></select></td> </tr> </table> </body> </html>