<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*<![CDATA[*/ * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; font-size:12px; color:white; } /*]]>*/ </style><!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"> </script> <script type="text/javascript"> //<![CDATA[ $(function(){ //移到右边 $('#add').click(function() { //获取选中的选项，删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); //移到左边 $('#remove').click(function() { $('#select2 option:selected').appendTo('#select1'); }); //全部移到右边 $('#add_all').click(function() { //获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //全部移到左边 $('#remove_all').click(function() { $('#select2 option').appendTo('#select1'); }); //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){ $("option:selected",this).appendTo('#select1'); }); }); //]]> </script> </head> <body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1"> 选项1 </option> <option value="2"> 选项2 </option> <option value="3"> 选项3 </option> <option value="4"> 选项4 </option> <option value="5"> 选项5 </option> <option value="6"> 选项6 </option> <option value="7"> 选项7 </option> </select> <div> <span id="add">选中添加到右边>></span> <span id="add_all">全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px;height:160px;"> <option value="8"> 选项8 </option> </select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div> </div> </body> </html>
