jQuery插件 selectToSelect使用方法


Posted in Javascript onOctober 02, 2013

以前总想到网上找一个这样的,但是一直没有找到,所以我自己写了一个。希望能帮助到看到的童鞋。
如果谁有更强大的插件,跟我留一个地址,非常感谢!
效果如下:

jQuery插件 selectToSelect使用方法

代码如下:

(function($){
    $.fn.selectToSelect=function(options){
        if($.type(options)=="string"){
            var $this=$(this);
            if(options=="getSelectedIds"){
                var ids="";
                var arr=$("#"+$this.attr("id")+"seReSelect option");
                arr.each(function(i){
                     if(arr.length-1==i){
                        ids+=$(this).attr("id");
                     }else{
                        ids+=$(this).attr("id")+",";
                     }
                });
                return ids;
            }
            return $this;
        }
        var defaults={
            size:10,
            opSelect:[],
            opReSelect:[],
            onChange:function(data){}
        };
        var opts= $.extend(defaults,options);
        return this.each(function(){
           var $this=$(this);
            var str="<table>";
            str+="<tr>";
            str+="<td style='vertical-align: top;'>";
            str+="<select id='"+$this.attr("id")+"seSelect' multiple='multiple' size='"+opts.size+"'>";
            for(var i=0;i<opts.opSelect.length;i++){
                str+="<option name='"+$this.attr("id")+"opSelect' id='"+opts.opSelect[i].id+"' value='"+opts.opSelect[i].id+"'>"+opts.opSelect[i].name+"</option>"
            }
            str+="</select>";
            str+="</td>";
            str+="<td style='vertical-align: top;'> ";
            str+="<table>";
            str+="  <tr>";
            str+="    <td><button id='"+$this.attr("id")+"btnSelectAll' type='button'>>></button></td>";
            str+="  </tr>";
            str+="  <tr>";
            str+="    <td><button id='"+$this.attr("id")+"btnSelectOne' type='button'>  ></button></td>";
            str+="  </tr>";
            str+="  <tr><td style='height: 50px;'></td></tr>";
            str+="  <tr> ";
            str+="   <td><button id='"+$this.attr("id")+"btnReSelectOne' type='button'><  </button></td>";
            str+="  </tr> ";
            str+="  <tr>  ";
            str+="    <td><button id='"+$this.attr("id")+"btnReSelectAll' type='button'><<</button></td>  ";
            str+="  </tr> ";
            str+="</table>";
            str+="</td>";
            str+="<td style='vertical-align: top;'>";
            str+=" <select id='"+$this.attr("id")+"seReSelect' multiple='multiple' size='"+opts.size+"'> ";
            for(var i=0;i<opts.opReSelect.length;i++){
                str+="<option name='"+$this.attr("id")+"opReSelect' id='"+opts.opReSelect[i].id+"' value='"+opts.opReSelect[i].id+"'>"+opts.opReSelect[i].name+"</option>"
            }
            str+=" </select>";
            str+="</td>";
            str+="<td style='vertical-align: top;'> ";
            str+="  <table>   ";
            str+="    <tr>    ";
            str+="       <td><button id='"+$this.attr("id")+"btnUp' type='button'>↑</button></td> ";
            str+="    </tr> ";
            str+="    <tr>  ";
            str+="       <td><button id='"+$this.attr("id")+"btnDown' type='button'>↓</button></td>  ";
            str+="    </tr> ";
            str+="    <tr><td style='height: 50px;'></td></tr>";
            str+="  </table>";
            str+="</td>";
            str+="</tr>";
            str+="</table>";
           $this.html(str);
            //need juqery ui plugin
           $this.find("button").button();
            //"+$this.attr("id")+"
           $this.find("#"+$this.attr("id")+"btnSelectAll").click(function(){
               $this.find("option[name='"+$this.attr("id")+"opSelect']").each(function(i){
                   $("<option name='"+$this.attr("id")+"opReSelect' id='"+this.id+"' value='"+this.value+"'>"+$(this).text()+"</option>").appendTo("#"+$this.attr("id")+"seReSelect");
               });
               $("#"+$this.attr("id")+"seSelect").empty();
               opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
           });
            $("#"+$this.attr("id")+"btnReSelectAll").click(
                function(){
                    $("option[name='"+$this.attr("id")+"opReSelect']").each(function(i){
                        $("<option name='"+$this.attr("id")+"opSelect' id='"+this.id+"' value='"+this.value+"'>"+$(this).text()+"</option>").appendTo("#"+$this.attr("id")+"seSelect");
                    });
                    $("#"+$this.attr("id")+"seReSelect").empty();
                    opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                }
            );
            $("#"+$this.attr("id")+"btnSelectOne").click(
                function(){
                    if($("#"+$this.attr("id")+"seSelect").val()){
                        var arrChecked= $("#"+$this.attr("id")+"seSelect option:checked")
                        for(var i=0;i<arrChecked.length;i++){
                            $("<option name='"+$this.attr("id")+"opReSelect' id='"+arrChecked[i].id+"' value='"+arrChecked[i].value+"'>"+$(arrChecked[i]).text()+"</option>").appendTo("#"+$this.attr("id")+"seReSelect");
                            $("option[name='"+$this.attr("id")+"opSelect']").each(function(j){
                                if(this.value==arrChecked[i].value){
                                    $(this).remove();
                                }
                            });
                        }
                        opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );
            $("#"+$this.attr("id")+"btnReSelectOne").click(
                function(){
                    if($("#"+$this.attr("id")+"seReSelect").val()){
                        var arrChecked= $("#"+$this.attr("id")+"seReSelect option:checked");
                        for(var i=0;i<arrChecked.length;i++){
                            $("<option name='"+$this.attr("id")+"opSelect' id='"+arrChecked[i].id+"' value='"+arrChecked[i].value+"'>"+$(arrChecked[i]).text()+"</option>").appendTo("#"+$this.attr("id")+"seSelect");
                            $("option[name='"+$this.attr("id")+"opReSelect']").each(function(j){
                                if(this.value==arrChecked[i].value){
                                    $(this).remove();
                                }
                            });
                        }
                        opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );
            $("#"+$this.attr("id")+"btnUp").click(
                function(){
                    if($("#"+$this.attr("id")+"seReSelect").val()&&$("#"+$this.attr("id")+"seReSelect option:checked").length==1){
                        var index=$("#"+$this.attr("id")+"seReSelect")[0].selectedIndex;
                        $($("option[name='"+$this.attr("id")+"opReSelect']")[index]).after($("option[name='"+$this.attr("id")+"opReSelect']")[index-1]);
                        opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );
            $("#"+$this.attr("id")+"btnDown").click(
                function(){
                    if($("#"+$this.attr("id")+"seReSelect").val()&&$("#"+$this.attr("id")+"seReSelect option:checked").length==1){
                        var index=$("#"+$this.attr("id")+"seReSelect")[0].selectedIndex;
                        $($("option[name='"+$this.attr("id")+"opReSelect']")[index]).before($("option[name='"+$this.attr("id")+"opReSelect']")[index+1]);
                        opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );
        });
    };
})(jQuery);

使用方法:
var opSelect1=[{id:'1',name:'tip1'},{id:'2',name:'tip2'}];
          var opReSelect1=[{id:'3',name:'tip3'},{id:'3',name:'tip3'}];
         $("#selectToSelect1").selectToSelect({
                size:10,
                opSelect:opSelect1,
                opReSelect:opReSelect1,
                onChange:function(options){
                  var ids=  $("#selectToSelect1").selectToSelect("getSelectedIds");           
                }
            });
Javascript 相关文章推荐
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 #Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 #Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 #Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 #Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 #Javascript
javascript不可用的问题探究
Oct 01 #Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 #Javascript
You might like
几个php应用技巧
2008/03/27 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
Javascript模板技术
2007/04/27 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Java中实现多态的机制
2015/08/09 面试题
男方父母婚礼答谢词
2014/01/25 职场文书
代理班主任的自我评价
2014/02/04 职场文书
挂职自我鉴定
2014/02/26 职场文书
企业宣传工作方案
2014/06/02 职场文书
工会工作个人总结
2015/03/03 职场文书
驻村工作简报
2015/07/20 职场文书
公司档案管理制度
2015/08/05 职场文书
python析构函数用法及注意事项
2021/06/22 Python