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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
微信小程序 获取javascript 里的数据
Aug 17 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 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连接mssql数据库的几种方法
2013/02/21 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php实现将Session写入数据库
2015/07/26 PHP
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python八皇后问题的解决方法
2018/09/27 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
详解django2中关于时间处理策略
2019/03/06 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python编写俄罗斯方块
2020/03/13 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python爬取代理ip的示例
2020/12/18 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
一道Delphi上机题
2012/06/04 面试题
授权委托书公证
2014/09/14 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
公司委托书格式范文
2014/10/09 职场文书
学校政风行风整改方案
2014/10/25 职场文书
西岭雪山导游词
2015/02/06 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书