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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 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 应用程序安全防范技术研究
2009/09/25 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
javascript this用法小结
2008/12/19 Javascript
javascript prototype 原型链
2009/03/12 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
Python的subprocess模块总结
2014/11/07 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
2014年手术室工作总结
2014/11/26 职场文书
接收函格式
2015/01/30 职场文书
财务管理制度范本
2015/08/04 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记