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 option");
arr.each(function(i){
if(arr.length-1==i){
id =$(this).attr("id");
}else{
ids =$(this).attr("id") ",";
}
});
return ids;
}
return $this ;
}
vardefaults={
size:10,
opSelect:[],
opReSelect:[],
on変更:関数(データ){}
} ;
var opts= $.extend(defaults,options);
return this.each(function(){
var $this=$(this);
var str=" str ="";
str ="";
str ="";
for(var i=0;i str ="<オプション名='" $this.attr("id") "opSelect' id='" opts.opSelect[i].id "' value='" opts.opSelect[i ].id "'>" opts.opSelect[i].name ""
}
str ="";
str ="";
str =" ";
str ="";
str =" ";
str =" ";
str =" ";
str =" ";
str =" ";
str =" ";
str =" gt;";
str =" ";
str =" ";
str =" ";
str =" ";
  ";
str =" ";
str ="

>>

>

< < /button>

<<

";
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+=" 

↑

↓

";
            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 オプション:チェック済み").length==1){
varindex=$("#" $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("ヒント","レポートを選択してください!")
}
}
);
$("#" $this.attr("id") "btnDown").click(
function(){
if($ ("#" $this.attr("id") "seReSelect").val()&&$("#" $this.attr("id") "seReSelect オプション:チェック済み").length==1){
varindex=$("#" $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( "ヒント","レポートを選択してください!")
}
}
);
});
};
}) );

使用方法:

复制代码代码如下:

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");          
                }
            });