jquery controls 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 the code The code is as follows:

< ;td width="142">

All fruits:	My pick:

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 the jquery code:

Copy code The code is as follows:

//Move the role selected by the user
//setname: The name of the list of data to be moved out getname: The name of the list of data to be moved 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);
});
}

//Press First alphabetical order role list
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();
}
});
}
}

This completes the simple js control of the value movement of two list items.