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;
}
}
代码
<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>
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();
}
});
}
}