JQUERY-based implementation code for mutual adjustment of two ListBox subitems. For more information, see. HTML:
The Code is as follows:
Color not selected:
|
|
Selected color:
|
Blue Red 132
|
|
Ondblclick = "listMove ('colorselect', 'colorunselect', 'hidcolorselect', false, this. selectedIndex )"Size = "8" style = "height: 200px; width: 90%;">Red Purple Yellow Black White Green Pink
|
Corresponding JS method:
The Code is as follows:
Function listMove (main, follow, hidetextbox, isBack, index ){
If (index <0)
Return;
Var o = undefined;
Var source;
Var distinct;
Var dddd;
If (! IsBack ){
// A bug exists in IE6 using getElementById
Source = $ ('#' + main); // your own Doc ument. getElementById (main );
Distinct = $ ('#' + follow); // specify your doc ument. getElementById (follow );
}
Else {
Source = $ ('#' + follow); // specify your doc ument. getElementById (follow );
Distinct = $ ('#' + main); // specify your doc ument. getElementById (main );
}
Var hid = $ ('#' + hidetextbox) [0]; // document. getElementById (hidetextbox );
If (index! = Undefined ){
Var op = "option: eq (" + index + ")";
Source. find (op). each (function (){
Distinct. append (""+ $ (This). text () +"");
$ (This). remove ();
});
}
Else {
Source. find ("option: selected"). each (function (){
$ (This). remove ();
Distinct. append (""+ $ (This). text () +"");
});
}
Var str = "";
// Traverse Listbox to obtain the value of the selected item
$ ('#' + Main + 'option'). each (function (){
Str + = $ (this). val () + ',';
});
Hid. value = str;
}