First is the HTML code, with 2 ListBox controls and 2 buttons on the page for moving items
Copy Code code as follows:
<table border= "0" >
<tr>
<TD width= "156" > All Fruits:</td>
<TD width= > </td>
<TD width= "482" > My chosen:</td>
</tr>
<tr>
<TD rowspan= "2" ><asp:listbox selectionmode= "multiple" id= "Listall" rows= "" width= "156" runat= "Server" > </asp:ListBox></td>
<TD height= "A" align= "center" >
<input type= "button" id= "Btnleftmove" value= ">>>" onclick= "Move (' Listall ', ' listmy ');" /><br/><br/>
<input type= "button" id= "Btnrighttmove" value= "<<<" onclick= "Move (' listmy ', ' Listall ');" />
</td>
<TD rowspan= "2" ><asp:listbox selectionmode= "multiple" id= "Listmy" rows= "" width= "156" runat= "Server" > </asp:ListBox></td>
</tr>
</table>
The following is the binding of some data in the. cs file
Copy Code code 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 (); Sort fields with Tag records
}
}
Private ArrayList DataArray ()
{
Some of the data used, this is the default by the first word phonetic sorting
ArrayList list = new ArrayList ();
List. ADD ("Strawberry");
List. ADD ("pear");
List. ADD ("Orange");
List. ADD ("Mango");
List. ADD ("Apple");
List. ADD ("banana");
return list;
}
}
Can be sorted according to the fields in the database when actually used
Here's the jquery code:
Copy Code code as follows:
Mobile User-selected roles
SetName: List name to move out of data getname: List name to move data into
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);
});
}
Reorder
$.each ($ ("#" +getname+ "option"), function (Id,own) {
Orderrole (GetName);
});
}
Sort 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"));
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 ();
}
});
}
}
This completes the simple JS control of the value movement of the two list items.
