jQuery 플러그인 selectToSelect_jquery를 사용하는 방법

이런 건 늘 인터넷에서 찾아보고 싶었는데, 못 찾게 돼서 직접 적어봤습니다. 제가 보는 아이들의 신발에 도움이 되었으면 좋겠습니다.
혹시 더 강력한 플러그인이 있으시면 주소 남겨주시면 정말 감사하겠습니다!
효과는 다음과 같습니다.

코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

(function($){
    $.fn.selectToSelect=function(options){
        if($.type(options)=="string"){
            var $this =$(this);
            if(options=="getSelectedIds"){
                var ids="";
               var arr=$("#" $this.attr("id") "seReSelect 옵션 "); arr.each (function (i) {
if (Ar >                   }else{
                      ids =$(this).attr("id") ",";
            }
              });
                ID 반환;
            }
            $this 반환 ;
        }
        var defaults={
            size:10,
            opSelect:[],
           opReSelect:[],
            켜기 변경:함수(데이터){}
        } ;
        var opts= $.extend(defaults,options);
        return this.each(function(){
           var $this=$(this);
            var str="            str ="";
            str ="";
            str ="";
            str ="";
            str+="";
            str+="";
            str+="

";             str ="";             for(var i=0;i                str ="" opts.opSelect[i].name ""            }             str ="";             str ="

";             str ="";             str ="  ";             str ="    ";             str ="  ";            str ="  ";             str ="    ";             str ="  ";             str ="  ";             str ="  ";             str ="   ";             str ="  ";            str ="  ";            str ="      ";             str ="  ";             str =" >>   > ";             str ="

" ;             str =" ";             for(var i=0;i               str ="" 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(
               function(){
                   if($("#" $this.attr("id") "seReSelect").val()&&$("#" $this.attr("id") "seReSelect 옵션: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","보고서를 선택하세요!")
                   }
               }
            );
           $("#" $this.attr("id") "btnDown").click(
                기능(){
                    if($ ("#" $this.attr("id") "seReSelect").val()&&$("#" $this.attr("id") "seReSelect 옵션:선택됨").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( "팁","보고서를 선택하세요!")
                  }
               }
           );
       });
    };
})(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");          
                }
            }) ;