I wrote a very simple jquery plug-in, which can be implemented by calling the functions on the page.
Plug-in source code (listtolist. js ):
Copy codeThe Code is as follows:
/**
Fromid: id of the source list.
Toid: id of the target list.
MoveOrAppend parameter ("move" or "append "):
Move -- the option selected in the source list will be deleted. The option selected in the source list will be moved to the target list. If the option already exists in the target list, this option will not be added.
Append -- the option selected in the source list is not deleted. The option selected in the source list is added to the end of the target list. If the option already exists in the target list, this option is not added.
IsAll parameter (true or false): whether to move or add all
*/
JQuery. listTolist = function (fromid, toid, moveOrAppend, isAll ){
If (moveOrAppend. toLowerCase () = "move") {// move
If (isAll = true) {// move all
$ ("#" + Fromid + "option"). each (function (){
// Add the option in the source list to the target list. If the option already exists in the target list, no operation is performed.
$ (This ). appendTo ($ ("#" + toid + ": not (: has (option [value =" + $ (this ). val () + "])");
});
$ ("#" + Fromid). empty (); // clear the source list
}
Else if (isAll = false ){
$ ("#" + Fromid + "option: selected"). each (function (){
// Add the option in the source list to the target list. If the option already exists in the target list, no operation is performed.
$ (This ). appendTo ($ ("#" + toid + ": not (: has (option [value =" + $ (this ). val () + "])");
// The option that already exists in the target list is not moved. It is still in the source list and cleared.
If ($ ("#" + fromid + "option [value =" + $ (this). val () + "]"). length> 0 ){
$ ("#" + Fromid). get (0)
. RemoveChild ($ ("#" + fromid + "option [value =" + $ (this). val () + "]"). get (0 ));
}
});
}
}
Else if (moveOrAppend. toLowerCase () = "append "){
If (isAll = true ){
$ ("#" + Fromid + "option"). each (function (){
$ ("<Option> </option> ")
. Val ($ (this). val ())
. Text ($ (this). text ())
. AppendTo ($ ("#" + toid + ": not (: has (option [value =" + $ (this ). val () + "])");
});
}
Else if (isAll = false ){
$ ("#" + Fromid + "option: selected"). each (function (){
$ ("<Option> </option> ")
. Val ($ (this). val ())
. Text ($ (this). text ())
. AppendTo ($ ("#" + toid + ": not (: has (option [value =" + $ (this ). val () + "])");
});
}
}
};
/**
The function is similar to the above ("move ").
The difference is that when the selected option in the source list exists in the target list, the option in the source list will not be deleted.
IsAll parameter (true or false): whether to move or add all
*/
JQuery. list2list = function (fromid, toid, isAll ){
If (isAll = true ){
$ ("#" + Fromid + "option"). each (function (){
$ (This ). appendTo ($ ("#" + toid + ": not (: has (option [value =" + $ (this ). val () + "])");
});
}
Else if (isAll = false ){
$ ("#" + Fromid + "option: selected"). each (function (){
$ (This ). appendTo ($ ("#" + toid + ": not (: has (option [value =" + $ (this ). val () + "])");
});
}
};
Package download