jquery select 上移下移
阿新 • • 發佈：2019-01-05
網上搜到的，不太明白這個外掛指的是什麼。
但是把程式碼拷到檔案中，修改。確實可以實現上移下移。
<!--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>