1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 select{ 9 width: 100px; 10 height: 130px; 11 background-color: #cccccc; 12 13 } 14 15 div{ 16 display: inline-block; 17 } 18 19 input { 20 display: block; 21 margin: 5px; 22 } 23 24 </style> 25 26 27 28 </head> 29 <body> 30 31 <h2>select example</h2> 32 <select name="srcity" id="srcity" multiple> 33 <option value="1">Beijing</option> 34 <option value="2">Tokyo</option> 35 <option value="3">New York</option> 36 <option value="4">Berlin</option> 37 <option value="5">Paris</option> 38 <option value="6">Singapore</option> 39 </select> 40 41 42 <div> 43 <input type="button" value=">"> 44 <input type="button" value=">>"> 45 <input type="button" value="<"> 46 <input type="button" value="<<"> 47 </div> 48 49 50 51 <select name="tarsrc" id="tarsrc" multiple> 52 53 </select> 54 55 56 57 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 58 59 <script> 60 61 62 $(function () { 63 $("input[value=">"]").click( 64 function () { 65 $("#tarsrc").append($("#srcity>option:selected")); 66 } 67 ); 68 69 $("input[value=">>"]").click(function () { 70 $("#srcity>option").appendTo($("#tarsrc")); 71 }); 72 73 $("input[value="<"]").click(function () { 74 $("#srcity").append($("#tarsrc>option:selected")); 75 }); 76 77 $("input[value="<<"]").click(function () { 78 $("#srcity").append($("#tarsrc>option")); 79 }); 80 81 82 83 }); 84 85 </script> 86 87 88 89 90 91 </body> 92 </html>