jquery控制listbox中项的移动并排序

  首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目

  

复制代码 代码如下:

  <table border="0">

  <tr>

  <td width="156">全部水果:</td>

  <td width="142"> </td>

  <td width="482">我挑选的:</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 /><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>

  下面是在.cs文件中绑定一些数据

  

复制代码 代码如下:

  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(); //用tag记录排序字段

  }

  }

  private ArrayList DataArray()

  {

  //用到的一些数据,这里已默认按第一个字的拼音排序

  ArrayList list = new ArrayList();

  list.Add("草莓");

  list.Add("梨");

  list.Add("桔子");

  list.Add("芒果");

  list.Add("苹果");

  list.Add("香蕉");

  return list;

  }

  }

  在实际使用时可根据数据库中的字段排序

  下面是jquery的代码:

  

复制代码 代码如下:

  //移动用户选择的角色

  //setname:要移出数据的列表名称 getname:要移入数据的列表名称

  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);

  });

  }

  //重新排序

  $.each($("#"+getname+" option"), function(id,own){

  orderrole(getname);

  });

  }

  //按首字母排序角色列表

  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"));

  //循环列表中第一项值下所有元素

  $.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();

  }

  });

  }

  }

  这样就完成了简单的js控制两个列表项的值移动。