jQuery外掛 selectToSelect使用方法_jquery

以前總是想到網路上找一個這樣的，但是一直沒有找到,所以我自己寫了一個。希望能幫助看到的童鞋。
如果誰有更強大的插件，跟我留一個地址，非常感謝!
效果如下:

程式碼如下:

複製程式碼 程式碼如下:

(function($){
    $.fn.selectToSelect=function(options){
       =$(this);
            if(options=="getSelectedIds"){
              var arr=$("#" $this.attr("id") "seReSelect option「）;
arr.each（function（i）{
>                      ids =$(this).attr("id") ",";
                     }
});
                返回id;
             }
        var defaults={
            大小:10,
              opReSelect :[],
           更改：函數（資料）{}
        } ;
   ); return this.each(function(){
var $this=$(this);
           ='vertical-align: top;' >";
            str ="                str ="" opts.opSelect[i].name ""
            }
            str ="";
           > ";
            str = "";
            str ="  ";
           >>";
            str ="  ";
          
            str ="    ") "btnSelectOne' type='button'>  >";
            str ="  ";
            str ="  ";
str ="  ;
            str ="    ";
        '>;  ";
            str ="  ";
                       str ="";
            str+="";
            str+="";
            str+="

>
" ;             str ="             for(var i=0;i        " opts.opReSelect[i].id "' value='" opts.opReSelect[i].id "'>" opts.opReSelect[i].name ""                        str+=" ";             str+="	";             str+="     ";             str+="        ";             str+="       ";             str+="    ";             str+="      ";             str+="         ";             str+="    ";             str+="    ";             str+="  ↑ ↓ ";             str+="

";
           $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){
                   $(""+$(this).text()+"").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){

                        $(""+$(this).text()+"").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[i]).text()+"").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[i]).text()+"").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(
                if($("#" $this.attr("id") "seReSelect").val()&&$("#" $this.attr("id") "seReSelect 選項：選取").length==1){
             .attr("id") "seReSelect")[0].selectedIndex;
                      .after($("option[name='" $this.attr("id") "opReSelect']")[index-1]);
                        " " $this.attr("id") "opReSelect']"));
                    }                 )
                   }
                     $("#" $this.attr("id") "btnDown").click(
               if( $ ("#" $this.attr("id") "seReSelect").val()&&$("#" $this.attr("id") "seReSelect 選項：選取").length==1) {
                        var index=$("#" $this.attr("id") "seRe")[0].index=$("#" $this.attr("id") "seRe")[0].select            $($("選項[name='" $this.attr( " id") "opReSelect']")[index]).before($("option[name='" $this.attr("id") "opReSelect']")[index 1]);
選擇.onChange($("option[name='" $this.attr("id") "opReSelect']"));
               🎜>                   {
             ( "提示","請選擇報告！")
                  }
        🎜>        });
    };
})(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");
}
}) ;