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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
手把手教你如何编译打包video.js
Dec 09 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP 错误处理机制
2015/07/06 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python中format()函数的简单使用教程
2018/03/14 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
详解python算法常用技巧与内置库
2020/10/17 Python
python sleep和wait对比总结
2021/02/03 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
工作保证书范文
2014/04/29 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
在校生证明
2015/06/17 职场文书
初中政教处工作总结
2015/08/12 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
浅谈Python中的正则表达式
2021/06/28 Python