jquery列表双向选择器的改进版本

记得之前发表过一篇《Jquery简单应用总结》的文章，最后有一个自己做的列表双向选择器，让我觉得有点挫败。昨天没做什么改进，把元素改成了select选项，支持shift多选，减少了代码量。

我的双向选择器支持批量修改角色，支持关键字查询角色信息。下面奉上源码：html页面：复制代码代码如下：链接href=' @ { '/public/样式表/ui-lighting/jquery-ui-1。9 .1 .定制。CSS ' } ' rel='样式表脚本src=' http : @ { '/public/JAVAScript/jquery-ui-1。9 .1 .定制。js ' } '/脚本形式方法=' post ' id=' changeRoleForm ' div class=' list _ role _ wrap ' div class=' checked _ list ' H3 class=' H3 _ title '用户列表/h3 p姓名账号/p select id=' SelectL ' name=' SelectL ' multiple=' multiple ' style=' width : 220 px；高度： 200px ' # {列表项目：活动duserlist，作为： '项目' }选项param _ id=' # { emVF items.id/}' param _ name=' # { emVF items.name/}' param _ account=' # { emVF items.account/}'#{emVF items.name/} # { emVF items.account/}/option # {/list }/select/div class=' role _ user _ control ' style=' position : relative；宽度：70 pxdiv class='common_btn '输入类型='按钮'值='添加class=' common _ blue ' id=' addthishrole '输入类型='按钮'值='删除class=' common _ blue ' id=' deletesrole '/div/div class=' be属于_角色_列表' h3类='h3_title '角色用户列表/h3 p姓名账号/p select id=' SelectR ' name=' SelectR ' multiple=' multiple ' style=' width : 220 px；高度： 200px ' # {列表项： roleList，as :'items'}选项param _ id=' # { emVF items.id/}' param _ name=' # { emVF items.name/}' param _ account=' # { emVF items.account/}'#{emVF items.name/} # { emVF items.account/}/option # {/list }/select/div class=' '输入类型=' text ' class=' set _ user _ I ' value='请输入姓名/账号输入类型=' text ' class=' set _ user _ I _ 2 ' value='请输入姓名/账号/div/div class=' common _ BTN ' style=' position : relative；输入类型='按钮'值='重置class=' common _ blue ' id=' reset _ change '输入类型='按钮'值='取消class=' common _ blue common _ cancle ' id=' cancel _ change '输入类型='按钮'值='确定class=' common _ blue ' id=' submit _ change '/div输入类型='隐藏' id=' r _ show loading ' value=' true '/form下面是射流研究…代码：复制代码代码如下： //加载用户列表，角色用户列表函数更改角色对话框(网址，参数，renderContainer) { //加载数据之前显示正在加载qiclo提单({ target : ' body '，text: '努力加载中.modal:true，width:180，top:'290px '，left:'450px '，postion: ' absolute '，Zin dex :2000 })；$.ajax({ url:url，data:parameters，type:'GET '，dataType:'html '，success : function(html){ $(呈现容器).html(html)；$(renderContainer).对话框({ autoOpen:true，width:590，modal:true，resizable:false，draggable : true })；} });$.qiclo加载({ remove : true })；//移除装载。

} $(function(){ var left sel=$(' # SelectL ')；var right sel=$(' # SelectR ')；//点击加载用户列表，角色用户列表$('.add _ remove _ user’).live('click '，function () { var rid=$(').当前')。attr('id ').子字符串(' ut_ ' .长度);changeroleDialog(changeroleroute。URL()，{id:rid}，' .set _ user _ list’)；});//#####单击'添加/删除'左右切换列表开始# # # # # # # #/$(' # addthissrole ').live('click '，function(){ $(' # selectL options : selected ').每个（函数(){ $(此)).移除()。前置到(' # SelectR ')；});});$(' # deletesrole ').live('click '，function(){ $(' # SelectR options : selected ').每个（函数(){ $(此)).移除()。前置到(' # SelectL ')；});});//########单击'添加/删除'切换列表结束# # # # # # # # #////# # # # # # #双击选择权切换列表开始# # # # # # #//左选择。live(' dbl click '，function () { $(this)).查找(“option:selected”).每个（函数(){ $(此)).移除()。前置到(' # SelectR ')；});});rightSel.live('dblclick '，function(){ $(this)} .查找(“option:selected”).每个（函数(){ $(此)).移除()。前置到(' # SelectL ')；});});//########双击选择权切换列表结束# # # # # # # # #////# # # # # # #鼠标按下取消文本框提示消息并聚焦begin # # # # # # # #/$(function(){ $(')).set _ user _ I’).live('mousedown '，function () { if ($(')).set _ user _ I’).val()=='请输入姓名/账号') { $('.set _ user _ I’).val(" ")；$('.set _ user _ I’).聚焦；} });$('.set _ user _ I _ 2’).live('mousedown '，function () { if ($(')).set _ user _ I _ 2’).val()=='请输入姓名/账号') { $('.set _ user _ I _ 2’).val(" ")；$('.set _ user _ I _ 2’).聚焦；} }) }) //####### 鼠标按下取消文本框提示消息并聚焦end # # # # # # # # #//-在用户列表输入内容按进入显示查询结果begin - //$(' .set _ user _ I’).live('keypress '，function(event){ var key code=event。什么；定义变量条件=$('。set _ user _ I’).val()；如果(键码==13) { //加载数据之前显示正在加载qiclo提单({ target : ' body '，text: '努力加载中.'，modal:true，width:180，top:'290px '，left:'450px '，postion: ' absolute '，Zin dex :2000 })；$.ajax({ url:getUserRount.url())、数据： { condition : condition }、类型：'GET '、数据类型：'json '、成功：函数(data){ var select=$(' # selectL ')；if(数据。长度==0){ $(' # SelectL option ').移除();var option=$(' option style=' color : # f6a 828；default _ value='无结果'/option ').追加('没有匹配的查询结果)选择.追加(选项);$.qiclo加载({ remove : true })；//移除装载……返回；} $('#selectL选项')。移除();for(var I=0；一。数据。长度；i ) { var id=data[i]._1;var name=data[i]._2;定义变量账户=数据[i]._3;var option=$(' option param _ id=' id ' ' param _ name=' name ' ' param _ account=' account ' ' style='光标：指针'/option ').追加（名称)。追加(""帐户);select.append(选项);} } });$.qiclo加载({ remove : true })；//移除正在加载……} });$('.set _ user _ I _ 2’).live('keypress '，function(event){ var key code=event。什么；//文本框内容定义变量条件=$('。set _ user _ I _ 2’).val()；//当前选中的角色ID var rid=$(' .当前')。attr('id ').子字符串(' ut_ ' .长度);如果(键码==13) { //加载数据之前显示正在加载qiclo提单({ target : ' body '，text: '努力加载中.modal:true，width:180，top:'300px '，left:'770px '，postion: ' absolute '，Zin dex :2000 })；$.Ajax({ URL : getroleuserrount。URL()、数据： {条件：条件、角色：rid}、类型：'GET '、数据类型：'json '、成功：函数(数据){ var select=$(' # selectR ')；if(数据。长度==0){ $(' # SelectR option ').移除();var option=$(' option style=' color : # f6a 828；default _ value='无结果'/option ').追加('没有匹配的查询结果)选择.追加(选项);$.qiclo加载({ remove : true })；//移除装载。

返回；} /* $('.tr _ checked’).每个（函数(){ $(此)).移除();});*/$(' # select er选项')。移除();for(var I=0；一。数据。长度；i ) { var id=data[i]._1;var name=data[i]._2;定义变量账户=数据[i]._3;var option=$(' option param _ id=' id ' ' param _ name=' name ' ' param _ account=' account ' ' style='光标：指针'/option ').追加（名称)。追加(""帐户);select.append(选项);} } });$.qiclo加载({ remove : true })；//移除正在加载……} });-在列表输入内容按进入显示查询结果结束了。-点击"确定"按钮提交用户转换角色（后台)bigen-$(function(){ $(“# submit _ change”)).live('click '，function(){ var form=$(' # changeRoleForm ')；var urid=[]；//角色用户列表中用户身份数组var uid=[]；//用户列表中用户身份数组//当前选中的角色ID var rid=$(' .当前')。attr('id ').子字符串(' ut_ ' .长度);$('#selectL选项')。每个（函数(){ if ($(this)).attr('param_id ')！=undefined) { uid.push($(this).attr(' param _ id ')；}控制台。日志(uid)；});$(' # select er选项')。每个（函数(){ if ($(this)).attr('param_id ')！=undefined) { urid.push($(this).attr(' param _ id ')；}控制台。日志(urid)；});//加载数据之前显示正在加载qiclo提单({ target : ' body '，text: '努力加载中.modal:true，width:180，top:'50% '，left:'50% '，postion: ' absolute '，zindex :2000 })；$.Ajax({ URL : changeuserroleunt。网址())、数据：表格。serialize()' urid=' urid ' UIDs=' uid ' rid=' rid '，type:'post '，dataType:'json '，success :函数(数据){ if(数据。flag){ $ .qicTips({message:data.msg，level:1，target:'#submit_change '，mleft:0，mtop :-60 })；} else { $ .qicTips({message:data.msg，level:2，target:'#submit_change '，mleft:0，mtop :-60 })；} } });$.qiclo加载({ remove : true })；//移除正在加载……});});-点击"确定"按钮提交用户转换角色（后台)end - //点击"取消"按钮关闭对话框$(函数(){ $('#cancel_change ').live('click '，function () { $(').set _ user _ list’).对话框("关闭");});});//点击"重置"还原$('#reset_change ').live('click '，function () { var rid=$(').当前')。attr('id ').子字符串(' ut_ ' .长度);changeroleDialog(changeroleroute。URL()，{id:rid}，' .set _ user _ list’)；});});做的不好的地方请大家多多指教！