Implementation Code for mutual adjustment of two ListBox subitems Based on JQUERY

HTML:
Copy codeThe Code is as follows:
<Div id = "divObj3" class = "divContent">
<Input id = "hidColorSelect" name = "ColorSelect" type = "hidden" value = "3, 5, 6, 11, 12, 13, 14"/>
<Table style = "width: 100%; text-align: center;">
<Tr class = "tr">
<Td class = "tdr" align = "center" width = "50%">
<Span id = "ctl00_contentplaceholder=webpanel4_label7"> NO color selected </span>:
</Td>
<Td class = "tdl" width = "1%">
</Td>
<Td class = "tdr" align = "center" width = "50%">
<Span id = "ctl00_contentplaceholder=webpanel4_label8"> selected color </span>:
</Td>
</Tr>
<Tr class = "tr">
<Td align = "right">
<Select id = "colorUnSelect" multiple = "multiple" name = "unSelectColors" ondblclick = "listMove ('colorselect', 'colorunselect', 'hidcolorselect', true, this. selectedIndex) "size =" 8 "style =" height: 200px; width: 90%; "> <option value =" 4 "> blue </option>
<Option value = "21"> Red 132 </option>
</Select>
</Td>
<Td>


</Td>
<Td align = "left">
<Select id = "colorSelect" multiple = "multiple" name = "selectColors"
Ondblclick = "listMove ('colorselect', 'colorunselect', 'hidcolorselect', false, this. selectedIndex )"
Size = "8" style = "height: 200px; width: 90%;">
<Option value = "3"> Red </option>
<Option value = "5"> purple </option>
<Option value = "6"> yellow </option>
<Option value = "11"> black </option>
<Option value = "12"> White </option>
<Option value = "13"> green </option>
<Option value = "14"> Pink </option>
</Select>
</Td>
</Tr>
</Table>
</Div>

Corresponding JS method:
Copy codeThe 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 ("<option value = '" + $ (this ). val () + "'>" + $ (this ). text () + "</option> ");
$ (This). remove ();
});
}
Else {
Source. find ("option: selected"). each (function (){
$ (This). remove ();
Distinct. append ("<option value = '" + $ (this ). val () + "'>" + $ (this ). text () + "</option> ");
});
}
Var str = "";
// Traverse Listbox to obtain the value of the selected item
$ ('#' + Main + 'option'). each (function (){
Str + = $ (this). val () + ',';
});
Hid. value = str;
}