基于JQUERY的两个ListBox子项互相调整的实现代码

HTML:

<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_ContentPlaceHolder1_WebPanel4_Label7">未选择颜色</span> ： 
</td> 
<td class="tdl" width="1%"> 
</td> 
<td class="tdr" align="center" width="50%"> 
<span id="ctl00_ContentPlaceHolder1_WebPanel4_Label8">已选择颜色</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">蓝色</option> 
<option value="21">红色132</option> 
</select> 
</td> 
<td> 
<img alt="" name="btnRAdd" id="btnRAdd1" src="/Content/images/%E4%B8%8B%E4%B8%80%E9%A1%B5.jpg" style="border-width: 0px;cursor:hand;" onclick="listMove('colorSelect','colorUnSelect','hidColorSelect',true)" /> 
<img alt="" name="btnRDrop" id="btnRDrop1" src="/Content/images/%E5%89%8D%E4%B8%80%E9%A1%B5.jpg" style="border-width: 0px;cursor:hand;" onclick="listMove('colorSelect','colorUnSelect','hidColorSelect',false)" /> 
</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">红色</option> 
<option value="5">紫色</option> 
<option value="6">黄色</option> 
<option value="11">黑色</option> 
<option value="12">白色</option> 
<option value="13">绿色</option> 
<option value="14">粉红色</option> 
</select> 
</td> 
</tr> 
</table> 
</div>

对应JS方法:

function listMove(main, follow, hidetextbox, isBack, index) { 
if (index < 0) 
return; 
var o = undefined; 
var source; 
var distinct; 
var dddd; 
if (!isBack) { 
//使用getElementById在IE6中存在BUG 
source = $('#' + main);// window.document.getElementById(main); 
distinct = $('#' + follow); //window.document.getElementById(follow); 
} 
else { 
source = $('#' + follow); // window.document.getElementById(follow); 
distinct = $('#' + main); // window.document.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 = ""; 
//遍历Listbox，取得选中项的值 
$('#' + main + ' option').each(function () { 
str += $(this).val() + ','; 
}); 
hid.value = str; 
}