jQuery實現選項內容的左右移動效果
阿新 • • 發佈：2019-01-08
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script language="javascript" type="text/javascript" src="../../include/jquery.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function (){ //為新增按鈕增加事件 $("#leftbtn").click(function (){ //獲取選擇的值 $("#leftop option:selected").each(function (i){ //在右邊新增所選值，並且新增之後在左邊刪除所選值 $("#rightop").append("<option>"+this.text+"</option>"); }).remove(); }); //為刪除按鈕增加事件 $("#rightbtn").click(function (){ //獲取所選擇的值 $("#rightop option:selected").each(function (i){ //在左邊新增所選值，並且新增之後在右邊刪除所選值 $("#leftop").append("<option>"+this.text+"</option>"); }).remove(); }); //增加刪除按鈕事件 $("#del").click(function (){ //獲取要刪除的值 $("#rightop option:selected,#leftop option:selected").each(function (i){ //刪除所選值 $(this).remove(); }); }); }); </script> </head> <body> <table width="387" height="283" border="0"> <tr> <td height="21" colspan="4"> </td> </tr> <tr> <td width="72" rowspan="7"> <select id="leftop" multiple="multiple" size="12" style="width:150px; height:180px;"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">保定</option> <option value="4">遼寧</option> <option value="5">天津</option> <option value="6">雲南</option> <option value="7">廣東</option> <option value="8">山東</option> <option value="9">河南</option> <option value="10">山西</option> </select> </td> <td width="70" height="21"> </td> <td colspan="2" rowspan="7"> <select id="rightop" multiple="multiple" size="12" style="width:150px; height:180px;"> </select> </td> </tr> <tr> <td height="36" align="center" valign="middle"><input id="leftbtn" type="button" value=">>"/></td> </tr> <tr> <td height="27" align="center"> </td> </tr> <tr> <td height="38" align="center" valign="middle"><input id="del" type="button" value="刪除"/></td> </tr> <tr> <td height="37" align="center" valign="middle"> </td> </tr> <tr> <td height="34" align="center" valign="middle"><input id="rightbtn" type="button" value="<<"/></td> </tr> <tr> <td height="21" align="center" valign="middle"> </td> </tr> <tr> <td height="21" colspan="4"> </td> </tr> </table> </body> </html>