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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
vue-hook-form使用详解
Apr 07 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
vue分页插件的使用方法
Dec 25 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
php开发中的页面跳转方法总结
2015/04/26 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
短信提示使用 特效
2007/01/19 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
分页栏的web标准实现
2011/11/01 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python中django学习心得
2017/12/06 Python
python计算两个数的百分比方法
2018/06/29 Python
flask中的wtforms使用方法
2018/07/21 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
全国法制宣传日活动总结2014
2014/11/01 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
《灰雀》教学反思
2016/02/19 职场文书
竞聘书的秘诀
2019/04/02 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书