JQuer版---列表框移动

来源：互联网发布：web portal认证软件编辑：程序博客网时间：2024/06/03 21:25

之前使用DOM对象写了个列表框移动，非常繁琐，选择使用JQuery重写，只有几行代码显得非常简洁方便。原：DOM应用案例--列表框移动。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head><meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>  </head>  <body>  <div>  <select style="width:60px" multiple size="10" id="leftID">  <option>选项A</option>  <option>选项B</option>  <option>选项C</option>  <option>选项D</option>  <option>选项E</option>  <option>选项F</option>  <option>选项G</option>  <option>选项H</option>  <option>选项I</option>  <option>选项J</option>  </select>  </div>  <div style="position:absolute;left:100px;top:60px">  <input type="button" value="批量右移" id="rightMoveID"/>  </div>  <div style="position:absolute;left:100px;top:90px">  <input type="button" value="全部右移" id="rightMoveAllID"/>  </div>  <div style="position:absolute;left:220px;top:20px">  <select multiple size="10" style="width:60px" id="rightID">  </select>  </div>  </body>  <script type="text/javascript">  //批量右移  $("#rightMoveID").click(function(){  $("#rightID").append( $("#leftID option:selected") );  });    //双击右移  $("#leftID").dblclick(function(){  $("#rightID").append( $("#leftID option:selected") );  });    //全部右移  $("#rightMoveAllID").click(function(){  $("#rightID").append( $("#leftID option") );  });        </script></html>