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

　　<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>

　　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;

　　}