Use jquery to move and sort items in listbox

The following shows how to use jquery to control the movement of the selected items in ASP. NET asp: listbox control:

The first step is html code. There are two listbox controls and two buttons on the page for moving projects.

<Table border = "0">
<Tr>
<Td width = "156"> all fruits: </td>
<Td width = "142"> & nbsp; </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 = "& gt;" onclick = "move ('listall', 'listmy '); "/> <br/>
<Input type = "button" id = "btnrighttmove" value = "& lt;" 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

Code 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:

Code // 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.