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


Posted in Javascript onNovember 12, 2009

首先是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控制两个列表项的值移动。
Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue-swiper的使用教程
Aug 30 Javascript
详解vuex状态管理模式
Nov 01 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 #Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 #Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 #Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 #Javascript
Javascript 定时器调用传递参数的方法
Nov 12 #Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 #Javascript
JS解析XML的实现代码
Nov 12 #Javascript
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php中使用sftp教程
2015/03/30 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
python使用range函数计算一组数和的方法
2015/05/07 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
运动会稿件200字
2014/02/07 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
投标售后服务承诺书
2015/04/29 职场文书
检讨书格式
2015/05/07 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers