jQuery插件 selectToSelect使用方法

更新时间：2013年10月02日 15:46:22 作者：

最近做一个报表页面显示位置配置的界面,刚开始时用的是多个checkbox,选择其中需要的报表即可。后来随着业务变复杂，需要使用两个select,选择其中需要的到右边select，然后提交到数据库

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

代码如下:

            $("#"+$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");           
                }
            });

您可能感兴趣的文章:

使用jquery-easyui的布局layout写后台管理页面的代码详解
这篇文章主要介绍了使用jquery-easyui的布局layout写后台管理页面的代码详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
jQuery实现鼠标滑过遮罩并高亮显示效果
本文为大家详细介绍下使用jQuery实现鼠标滑过遮罩高亮显示效果，想必这种效果在网上大家都有见到过，下面是具体的示例，感兴趣的各位可以参考下哈，希望对大家有所帮助
2013-07-07
jQuery UI Dialog控件中的表单无法正常提交的解决方法
研究了页面源码后发现，jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面，而原始的Dialog模板部分（其内包含表单元素）也被移到了动态生成的HTML元素内。
2010-12-12
jQuery实现淡入淡出二级下拉导航菜单的方法
这篇文章主要介绍了jQuery实现淡入淡出二级下拉导航菜单的方法,涉及jquery简单操作页面元素展开与隐藏的实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-08-08
jQuery实现悬浮在右上角的网页客服效果代码
这篇文章主要介绍了jQuery实现悬浮在右上角的网页客服效果代码,涉及jQuery响应鼠标事件动态变换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
ext jquery 简单比较
EXT体积大,jQuery更专注于简化最基础的开发工作.所以使用起来,也就感觉更像是使用原始的js进行开发一样
2010-04-04
jQuery操作动态生成的内容的方法
这篇文章主要介绍了jQuery操作动态生成的内容的方法,对比分析了bind与live方法,说明了live方法在处理新增元素时的作用,需要的朋友可以参考下
2016-05-05
JQuery为元素添加样式的实现方法
下面小编就为大家带来一篇JQuery为元素添加样式的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
jQuery 更改checkbox的状态,无效的解决方法
下面小编就为大家带来一篇jQuery 更改checkbox的状态,无效的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
jquery实现简单的表单验证
这篇文章主要介绍了jquery实现简单的表单验证，思路大概是先为每一个required添加必填的标记，用each()方法来实现，感兴趣的小伙伴们可以参考一下
2015-11-11