最近在弄jquery左右移动,感觉挺简单的,而且很好使,所以分享出来一下。欢迎大家指正与发表意见。
<!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=utf-8" /> <title>MultiSelects(左右选框) 完美版</title> <script src="jquery-1.7.1.js"></script> <script> $(document).ready(function(){ $("#left").dblclick(function(){ moveRight(); }); $("#right").dblclick(function(){ moveLeft(); }); $("#add").click(function(){ moveRight(); }); $("#remove").click(function(){ moveLeft(); }); $("#addall").click(function(){ $("#right").append($("#left option:selected")); }); $("#removeall").click(function(){ $("#left").append($("#right option:selected")); }); $("#leftup").click(function() { up('left'); }); $("#leftdown").click(function(){ down('left'); }); $("#rightup").click(function(){ up('right'); }); $("#rightdown").click(function(){ down('right'); }); }); function moveRight() { var alloptions = $("#left option"); var so = $("#left option:selected"); $("#right").append(so); } function moveLeft() { var alloptions = $("#right option"); var so = $("#right option:selected"); $("#left").append(so); } function up(obj) { var so = $("#"+obj+" option:selected"); if(so.index() != 0) { so.each(function() { $(this).prev().before($(this)); }); } } function down(obj) { var alloptions = $("#"+obj+" option"); var so = $("#"+obj+" option:selected"); var soLen = so.length-1; if(so.index() != alloptions.length-1) { for(i=soLen; i>=0; i--) { var item = $(so.get(i)); item.next().after(item); } } } </script> </head> <body> <table width="288" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="29"> <input type="button" name="leftup" id="leftup" value="↑" /><br /> <input type="button" name="leftdown" id="leftdown" value="↓" /> </td> <td width="100"> <select name="left" size="10" multiple="multiple" id="left" 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="right" size="10" multiple="multiple" id="right" style="width:100px;"></select> </td> <td width="119"> <input type="button" name="rightup" id="rightup" value="↑" /><br /> <input type="button" name="rightdown" id="rightdown" value="↓" /> </td> </tr> </table> <p>支持直接双击添加/删除,上下(支持间隔)排序</p> </body> </html>
完
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/98526.html