1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04-jQuery-城市选择案例</title> 6 <style type="text/css" media="screen"> 7 select { 8 width: 200px; 9 background-color: teal; 10 height: 200px; 11 font-size: 20px; 12 } 13 /**把大盒子的宽度变小了，内容自然垂直排列**/ 14 .btn-box { 15 width: 30px; 16 display: inline-block; 17 vertical-align: top; 18 } 19 </style> 20 <script src="jquery-1.11.3.js"></script> 21 <script> 22 // $(function(){ 23 // $("#btn-sel-none").on('click',function(){ 24 // $("#tar-city option").appendTo('#src-city'); 25 // }); 26 27 // $("#btn-sel-all").on('click',function(){ 28 // $("#src-city option").appendTo('#tar-city'); 29 // }); 30 // $("#btn-sel").on('click',function(){ 31 // $("#src-city option:selected").appendTo('#tar-city'); 32 // }); 33 // $("#btn-back").on('click',function(){ 34 // $("#tar-city option:selected").appendTo('#src-city'); 35 // }); 36 // }); 37 38 39 $(function(){ 40 $("#btn-sel-all").on('click',function(){ 41 //把所有的 城市从左边 移动到右边select中 42 $("#src-city option").appendTo("#tar-city"); 43 }); 44 $("#btn-sel-none").on('click',function(){ 45 //把所有的 城市从左边 移动到右边select中 46 $("#tar-city option").appendTo("#src-city"); 47 }); 48 $("#btn-sel").on('click',function(){ 49 //把所有的 城市从左边 移动到右边select中 50 $("#src-city option:selected").appendTo("#tar-city"); 51 }); 52 53 $("#btn-back").on('click',function(){ 54 //把所有的 城市从左边 移动到右边select中 55 $("#tar-city option:selected").appendTo("#src-city"); 56 }); 57 }); 58 </script> 59 </head> 60 <body> 61 <select id="src-city" name="src-city" multiple> 62 <option value="1">北京</option> 63 <option value="2">上海</option> 64 <option value="3">深圳</option> 65 <option value="4">广州</option> 66 <option value="5">西红柿</option> 67 </select> 68 <div class="btn-box"> 69 <button id="btn-sel-all"> >> </button> 70 <button id="btn-sel-none"> << </button> 71 <button id="btn-back"> < </button> 72 <button id="btn-sel"> ></button> 73 </div> 74 75 <select id="tar-city" name="tar-city" multiple> 76 77 </select> 78 </body> 79 </html>