首页 > 代码库 > jquery实现 批量右移
jquery实现 批量右移
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <div> 9 <select style="width:60px" multiple size="10" id="leftID">10 <option>选项A</option>11 <option>选项B</option>12 <option>选项C</option>13 <option>选项D</option>14 <option>选项E</option>15 <option>选项F</option>16 <option>选项G</option>17 <option>选项H</option>18 <option>选项I</option>19 <option>选项J</option>20 </select>21 </div>22 <div style="position:absolute;left:100px;top:60px">23 <input type="button" value="批量右移" id="rightMoveID"/>24 </div>25 <div style="position:absolute;left:100px;top:90px">26 <input type="button" value="全部右移" id="rightMoveAllID"/>27 </div>28 <div style="position:absolute;left:220px;top:20px"> 29 <select multiple size="10" style="width:60px" id="rightID">30 </select>31 </div>32 </body>33 <script type="text/javascript">34 //双击右移35 $("#leftID").dblclick(function(){36 $("#rightID").append( $("#leftID option:selected") );37 });38 //全部右移39 $("#rightMoveAllID").click(function(){40 $("#rightID").append( $("#leftID option") );41 });42 //批量右移43 $("#rightMoveID").click(function(){44 $("#rightID").append( $("#leftID option:selected") );45 });46 </script>47 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。