Implementation code for jquery to control the movement and sorting of items in listbox_jquery

The first is the html code. Put 2 listbox controls and 2 buttons on the page for moving items

Copy code Code As follows:

All fruits:		My pick:
< ;/asp:ListBox>

The following is to bind some data in the .cs file

Copy code The code is as follows:

public partial class _Default: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
ArrayList list=DataArray();
for (int i = 0; i < list.Count; i )
{
listall.Items.Add(list[i].ToString());
listall.Items[i].Attributes["tag"] = i.ToString(); //Use tag to record sorting fields
}
}
private ArrayList DataArray()
{
//Some data used are sorted by the pinyin of the first word by default
ArrayList list = new ArrayList();
list.Add("Strawberry");
list.Add( "Pear");
list.Add("Orange");
list.Add("Mango");
list.Add("Apple");
list.Add("Banana ");
return list;
}
}

In actual use, it can be sorted according to the fields in the database
The following is jquery Code:

Copy code The code is as follows:

//Mobile users Selected role
//setname: the name of the list to move the data out getname: the name of the list to move the data in
function move(setname,getname)
{
var size=$("#" setname " option").size();
var selsize=$("#" setname " option:selected").size();
if(size>0&&selsize>0)
{
$.each($("#" setname " option:selected"), function(id,own){
var text=$(own).text();
var tag=$(own). attr("tag");
$("#" getname).prepend("" text "");
$(own ).remove();
$("#" setname "").children("option:first").attr("selected",true);
});
}
//Reorder
$.each($("#" getname " option"), function(id,own){
orderrole(getname);
});
}
//Sort the role list by first letter
function orderrole(listname)
{
var size=$("#" listname " option").size();
var one=$(" #" listname " option:first-child");
if(size>0)
{
var text=$(one).text();
var tag=parseInt($( one).attr("tag"));
//Loop all elements under the first value in the list
$.each($(one).nextAll(), function(id,own){
var nextag=parseInt($(own).attr("tag"));
if(tag>nextag)
{
$(one).remove();
$( own).after("" text "");
one=$(own).next();
}
});
}
}