jQuery--文檔處理案例
阿新 • • 發佈：2018-09-09
http nal 左右移動 技術 option itl button bsp right
需求
如上圖，實現左右兩邊的選擇菜單可以左右移動，‘>’按鈕一次只能移動被選中的一個菜單，‘>>’按鈕一次移動所有被選擇的菜單，‘>>>’按鈕
將所有菜單進行移動，不管是否被選擇。
代碼實現
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("#left1").click(function(){ 10 $("#leftSelectId option:selected:first").removeAttr("selected").appendTo($("#rightSelectId")); 11 }); 12 $("#left2").click(function(){ 13 $("#leftSelectId option:selected").removeAttr("selected").appendTo($("#rightSelectId")); 14 }); 15 $("#left3").click(function(){ 16 $("#leftSelectId option").removeAttr("selected").appendTo($("#rightSelectId")); 17 }); 18 19 $("#right1").click(function(){ 20 $("#rightSelectId option:selected:first").removeAttr("selected").appendTo($("#leftSelectId")); 21 }); 22 $("#right2").click(function(){ 23 $("#rightSelectId option:selected").removeAttr("selected").appendTo($("#leftSelectId")); 24 }); 25 $("#right3").click(function(){ 26 $("#rightSelectId option").removeAttr("selected").appendTo($("#leftSelectId")); 27 }); 28 }); 29 </script> 30 31 <style type="text/css"> 32 .textClass { 33 background-color: #ff0000; 34 } 35 </style> 36 </head> 37 <body> 38 <table> 39 <tr> 40 <td> 41 <select id="leftSelectId" style="width:100px" multiple="multiple" size="6"> 42 <option>京東商城</option> 43 <option>蘇寧易購</option> 44 <option>淘寶</option> 45 <option>拼多多</option> 46 </select> 47 48 </td> 49 <td> 50 <input id="left1" type="button" value=">" style="width:50px"/> <br/> 51 <input id="left2" type="button" value=">>" style="width:50px"/> <br/> 52 <input id="left3" type="button" value=">>>" style="width:50px"/> <br/> 53 54 <input type="button" id="right1" value="<" style="width:50px"/> <br/> 55 <input type="button" id="right2" value="<<" style="width:50px"/> <br/> 56 <input type="button" id="right3" value="<<<" style="width:50px"/> <br/> 57 58 </td> 59 <td> 60 <select id="rightSelectId" style="width:100px" multiple="multiple" size="6"> 61 </select> 62 63 </td> 64 </tr> 65 </table> 66 67 </body> 68 </html>
jQuery--文檔處理案例