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 读后台cookie代码
Sep 15 Javascript
javascript复制对象使用说明
Jun 28 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
layui实现table加载的示例代码
Aug 14 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
详解python深浅拷贝区别
2019/06/24 Python
python实现取余操作的简单实例
2020/08/16 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
《雪地里的小画家》教学反思
2014/02/22 职场文书
司法建议书范文
2014/05/13 职场文书
2014年生产部工作总结
2014/12/17 职场文书
向女朋友道歉的话
2015/01/20 职场文书
最感人的道歉情书
2015/05/12 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
Docker下安装Oracle19c
2022/04/13 Servers