How to Use the jQuery plug-in selectToSelect _ jquery

Recently, a report page shows the location configuration page. At the beginning, multiple checkpoints are used. Select the required report. Later, as the business becomes more complex, two select statements are required. select the select statement from the select statement to the right, and submit the statement to the database. Before that, I always thought of finding one on the Internet, but I never found one, so I wrote one myself. Hope to help you see the children's shoes.
If anyone has a more powerful plug-in, leave an address with me. Thank you very much!
The effect is as follows:

The Code is as follows:

The Code is as follows:

(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 ="

";Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + ="

"; Str + ="";For (var I = 0; IStr + =""+ 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; IStr + =""+ Opts. opReSelect [I]. name +""}Str + =""; Str + ="

"; Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + =" ";Str + =" Bytes Bytes "; Str + ="

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

Usage:

The Code is as follows:

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