两个ListBox子项互相调整 JQUERY

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(&#39;colorSelect&#39;,&#39;colorUnSelect&#39;,&#39;hidColorSelect&#39;,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;
 
    }