search

Home >Web Front-end >JS Tutorial >JQuery implements permission selection example with sorting function_jquery

JQuery implements permission selection example with sorting function_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:391483browse

The example in this article describes how JQuery implements permission selection with sorting function. Share it with everyone for your reference. The specific implementation method is as follows: 

<!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": "刘德华", "Age": "52" },
 { "id": "2", "Name": "文章", "Age": "26" },
 {"id":"3","Name":"孙红雷","Age":"40"},
 { "id": "4", "Name": "葛优", "Age": "58"}];
 $(function () {
  var $leftSel = $("#leftSel");
  for (var i = 0; i < myJson.length; i++) {
   var $option = $("<option sortID='" + 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 () {
   //把右边列表的内容添加到左边，并按sortID属性进行排序
   $("#rightSel option").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;   //交换位置
    }
    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 be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery uses the index method to get the subscript of the Jquery object array_jqueryNext article：JQuery uses the index method to get the subscript of the Jquery object array_jquery

Related articles

See more