jquery select 上移下移

来源：互联网发布：linux历史命令存放在哪编辑：程序博客网时间：2024/04/29 15:53
网上搜到的，不太明白这个插件指的是什么。
但是把代码拷到文件中，修改。确实可以实现上移下移。
<!--jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移源码：--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>MultiSelects(左右选框) 完美版</title><script src="http://demo.deeka.cn/limit2checked/jquery-1.2.6.pack.js"></script><script><!--$(function(){   $("#s1 option:first,#s2 option:first").attr("selected",true);     $("#s1").dblclick(function(){     var alloptions = $("#s1 option");     var so = $("#s1 option:selected");     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);         $("#s2").append(so);   });     $("#s2").dblclick(function(){     var alloptions = $("#s2 option");     var so = $("#s2 option:selected");         so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);         $("#s1").append(so);   });     $("#add").click(function(){     var alloptions = $("#s1 option");     var so = $("#s1 option:selected");     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);         $("#s2").append(so);   });     $("#remove").click(function(){     var alloptions = $("#s2 option");     var so = $("#s2 option:selected");         so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);         $("#s1").append(so);   });     $("#addall").click(function(){     $("#s2").append($("#s1 option").attr("selected",true));   });     $("#removeall").click(function(){     $("#s1").append($("#s2 option").attr("selected",true));   });     $("#s1up").click(function(){     var so = $("#s1 option:selected");     if(so.get(0).index!=0){       so.each(function(){           $(this).prev().before($(this));       });     }   });     $("#s1down").click(function(){     var alloptions = $("#s1 option");     var so = $("#s1 option:selected");         if(so.get(so.length-1).index!=alloptions.length-1){       for(i=so.length-1;i>=0;i--)       {         var item = $(so.get(i));         item.insertAfter(item.next());       }     }   });     $("#s2up").click(function(){     var so = $("#s2 option:selected");     if(so.get(0).index!=0){       so.each(function(){           $(this).prev().before($(this));       });     }   });     $("#s2down").click(function(){     var alloptions = $("#s2 option");     var so = $("#s2 option:selected");         if(so.get(so.length-1).index!=alloptions.length-1){       for(i=so.length-1;i>=0;i--)       {         var item = $(so.get(i));         item.insertAfter(item.next());       }     }   });});--></script></head><body><table width="288" border="0" cellpadding="0" cellspacing="0">   <tr>     <td width="29">       <input type="button" name="s1up" id="s1up" value="↑" /><br />     <input type="button" name="s1down" id="s1down" value="↓" /></td>     <td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;">       <option value="opt01">option01</option>       <option value="opt02">option02</option>       <option value="opt03">option03</option>       <option value="opt04">option04</option>       <option value="opt05">option05</option>       <option value="opt06">option06</option>       <option value="opt07">option07</option>       <option value="opt08">option08</option>       <option value="opt09">option09</option>       <option value="opt10">option10</option>     </select></td>     <td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td>     <td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;">     </select></td>     <td width="119">       <input type="button" name="s2up" id="s2up" value="↑" /><br />     <input type="button" name="s2down" id="s2down" value="↓" /></td>   </tr></table><p>支持直接双击添加/删除，上下(支持间隔)排序</p><p>jQuery Learning 群：24810664</p></body></html>