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 相关文章推荐
css样式标签和js语法属性区别
Nov 06 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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循环跳出的问题
2013/07/01 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
python函数的5种参数详解
2017/02/24 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python3获取cookie常用三种方案
2020/10/05 Python
顶撞领导检讨书
2014/01/29 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年统计工作总结
2014/11/21 职场文书
电影圆明园观后感
2015/06/03 职场文书
工作证明书
2015/06/15 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js