Jquery controls the movement and sorting of items in ListBox

First, html Code , Put two ListBox controls and two buttons on the page for moving the project Copy code The Code is as follows: <Table border = "0">
<Tr>
<TD width = "156"> all fruits: </TD>
<TD width = "142"> </TD>
<TD width = "482"> selected by me: </TD>
</Tr>
<Tr>
<TD rowspan = "2"> <asp: listBox selectionmode = "multiple" id = "listall" rows = "12" width = "156" runat = "server"> </ASP: ListBox> </TD>
<TD Height = "41" align = "center">
<Input type = "button" id = "btnleftmove" value = ">" onclick = "move ('listall', 'listmy '); "/> <br/>
<Input type = "button" id = "btnrighttmove" value = "<" onclick = "move ('listmy', 'listall');"/>
</TD>
<TD rowspan = "2"> <asp: listBox selectionmode = "multiple" id = "listmy" rows = "12" width = "156" runat = "server"> </ASP: ListBox> </TD>
</Tr>
</Table>

Below are some data bound to 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 (); // records the sorting fields with tags.
}
}

Private arraylist dataarray ()
{
// Some data used, which is sorted by the first pinyin character by default
Arraylist list = new arraylist ();
List. Add ("strawberry ");
List. Add ("Li ");
List. Add ("orange ");
List. Add ("Mango ");
List. Add ("apple ");
List. Add ("banana ");
Return list;
}
}

In actual use, you can sort data by fields in the database.

The following is the jquery code:

Copy code The Code is as follows: // move the user-selected role
// Setname: name of the list to be removed from the data getname: name of the list to be moved into the data
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 ("<option tag = \" "+ tag +" \ ">" + TEXT + "</option> ");
$ (Own). Remove ();
$ ("#" + Setname + ""). Children ("option: First"). ATTR ("selected", true );
});
}
// Re-sort
$. Each ($ ("#" + getname + "option"), function (ID, own ){
Orderrole (getname );
});
}

// Sort the role list by the 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 "));
// All elements under the first value in the loop list
$. Each ($ (ONE). nextall (), function (ID, own ){
VaR nextag = parseint ($ (own). ATTR ("tag "));
If (TAG> nextag)
{
$ (ONE). Remove ();
$ (Own). After ("<option tag = \" "+ tag +" \ ">" + TEXT + "</option> ");
One = $ (own). Next ();
}
});
}
}

In this way, the JavaScript code is used to control the value movement of two list items.