The example of this article is about jquery's permission selection with sorting function. Share to everyone for your reference. The implementation methods are as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71-72 | <! 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></title> <script src=" jquery-1.6.2.min.js "type=" Text/javascript "> </script> <style type= "Text/css" > select{width:100px;height:100px;float:left;margin:10px} #main {float : left;width:100px;text-align:center;margin:10px;} #main input{width:100px} </style> <script type= "Text/javascript" > var Myjson = [{"id": "1", "Name": "Andy Lau", " Age ":", {"id": "2", "Name": "article", age ":" {"}, {" id ":" 3 "," Name ":" Sun Honglei "," Age ":" {"}, {" id ":" 4 "," Name ":" GE "," Ag E ":" 58 "}]; $ (function () {var $leftSel = $ ("#leftSel"); for (var i = 0; i < myjson.length i++) {var $option = $ ("<option Sor Tid= ' "+ myjson[i].id +" ' value= ' "+ myjson[i]. Name + "' >" + myjson[i].id + "," + myjson[i]. NamE + "</option>"); $option. Appendto ($leftSel); $ ("#btnMoveLeft"). Click (function () {var $selOptions = $ ("#leftSel option:selected"); $selOptions. Appendto ("# Rightsel ")). attr (" selected ", false); }); $ ("#btnMoveLeftAll"). Click (function () {var $allLeftOptions = $ ("#leftSel option"); $allLeftOptions. Appendto ("# Rightsel ")). attr (" selected ", false); }); $ ("#btnMoveRight"). Click (function () {var $selOptions = $ ("#rightSel option:selected"); $selOptions. Appendto ($leftSel ). attr ("selected", false); }); $ ("#btnMoveRightAll"). Click (function () {var $allRightOptions = $ ("#rightSel option"); $allRightOptions. Appendto ($ Leftsel). attr ("selected", false); }); $ ("#btnMoveLeftSort"). Click (function () {//Add the contents of the right list to the left and sort $ ("#rightSel option") by the SortID property. Appendto ("#leftSel ")); var $sortArray = $ ("#leftSel option"). Sort (function (prev, next) {var Prevsortid = parseint (Prev.sortid); var nextsortid = parseint (Next.sortid); if (Prevsortid > Nextsortid) {return 1;//Swap location} else {Return-1; } }); $ ("#leftSel"). Empty (). append ($sortArray); }); }); </script> </head> <body> <select id= "Leftsel" multiple= "multiple" > </select> <div id= "Main" > <input id= "btnmoveleft" type= "button" value= "-->"/> <input id= "btnmoveleftall" type= "button" Value= "==>"/> <input id= "btnmoveright" type= "button" value= "<--"/> <input id= "BtnMoveRightAll" type = "button" value= "<=="/> <input id= "btnmoveleftsort" type= "button" value= "<--sort"/> </div> < Select Id= "Rightsel" multiple= "multiple" > </select> </body> </html> |
I hope this article will help you with your jquery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
