Home > Web Front-end > JS Tutorial > jquery controls the movement and sorting of items in listbox_jquery

jquery controls the movement and sorting of items in listbox_jquery

WBOY
Release: 2016-05-16 18:41:49
Original
1295 people have browsed it

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("");
$(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("");
one=$(own).next();
}
});
}
}

This completes the simple js control of the value movement of two list items.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template