两个SELECT外加一个下拉框的JQuery JS联动操作

两个SELECT的内容移动以及一个下拉框的联动变化   JQuery JS  操作

jsp文件如下:

<script type="text/javascript" src="<%=CONTEXT_PATH%>/resources/js/bb/vp.ctrl.bb.js"></script>
<script type="text/javascript" src="<%=CONTEXT_PATH%>/jsp/bb/base/ssSheetAllot/editSsSheetAllot.js"></script>
<form name="form" action="#">
    <table class="p_tbl_bill" cellspacing="1" cellpadding="0">
        <tbody>
        <tr class="p_tr_bill">
            <td class='vp_caption' colspan="4">[表样分配]</td>
        </tr>
        <input type="hidden" id="rmenu" name="rmenu"/>
        <input type="hidden" id="typesheetid" name="typesheetid" value="<%=UtilPub.checkNull(bean.getTypesheetid())%>"/>
        <input type="hidden" id="fileid" name="fileid" value="<%=context.getRequest().getAttribute("fileid")%>">
        <input type="hidden" id="shindex" name="shindex" value="<%=context.getRequest().getAttribute("shindex")%>">
        <input type="hidden" id="sskeyid" name="sskeyid" value="<%=UtilPub.checkNull(bean.getSskeyid())%>"/>
        <input type="hidden" id="sssheetid" name="sssheetid" value="<%=UtilPub.checkNull(bean.getSssheetid())%>"/>


        <tr class="p_tr_bill">
            <td nowrap class="p_td_bill_lbl" colspan="3" style="width:100px" align="left">
                <p align="left">报表单位类型：<input type="text" id="customertypeid" name="customertypeid"  class="vp_input"
                                              missingMessage="请选择报表单位类型"></p>
            </td>
        </tr>
        <tr class="p_tr_bill" align="left">
            <td nowrap class="p_td_bill_lbl" colspan="3" align="left">
                <p align="left">
                    <input type=radio id="menu1" name="menu" value="0" οnclick="change('menu1')" checked="checked">可用全部表单
                    <input type=radio id="menu2" name="menu" value="1" οnclick="change('menu2')">分配具体的表单
                </p>
            </td>
        </tr>
        <tr class="p_tr_bill">
            <td nowrap class="p_td_bill_lbl" style="width:48%" align="left">
                <p align="left">可分配表单</p>


                <p align="left">
                    <select id="select1" name="select1" disabled="disabled" align="left" multiple="multiple" size="10" style="width: 200px">
                        <%
                            if (sList != null && sList.size() > 0) {
                                boolean pd = false;
                                for (int j = 0; j < sList.size(); j++) {
                                    SssheetBean tmp1 = sList.get(j);


                                    if (!pd) {
                        %>


                        <%
                                pd = true;
                            }
                        %>
                        <option id="<%=tmp1.getSssheetid()+"_"+tmp1.getIntindex()%>" value="<%=tmp1.getSssheetid()%>"><%=tmp1.getStrsssheetname()%>
                        </option>
                        <%


                            }


                            if (pd) {
                        %>


                        <%
                                }
                            }
                        %>
                    </select>
                </p>
            </td>
            <td nowrap class="p_td_bill_lbl" style="width:4%">
                <p align="center">
                    <a id="add1" href="###" class="easyui-linkbutton" style="width:35%" οnclick="AddItem()"> &nbsp;>&nbsp; </a><br>
                    <a id="add2" href="###" class="easyui-linkbutton" style="width:35%" οnclick="AddAllItem()"> >> </a><br>
                    <a id="back1" href="###" class="easyui-linkbutton" style="width:35%" οnclick="BackItem()"> &nbsp;<&nbsp; </a><br>
                    <a id="back2" href="###" class="easyui-linkbutton" style="width:35%" οnclick="BackAllItem()"> << </a>
                </p>
            </td>
            <td nowrap class="p_td_bill_lbl" style="width:48%">
                <p align="left">已分配表单</p>


                <p align="left">
                    <select id="sheet2" name="sheet2" disabled="disabled"  align="left" multiple="multiple" size="10" style="width: 200px">


                    </select>
                </p>
            </td>
        </tr>
        </tbody>
    </table>
</form>
<script type="text/javascript">
    loadTypeSheet();
</script>

js文件如下:

var typeComb;
var select1=document.getElementsByName("select1")[0];
var select2=document.getElementsByName("sheet2")[0];
var arrT = new Array(); //单位类型的数组
var arrS = new Array(); //可分配表单的数组
var dqString = "";
var dqNum=0;
page = $.extend(page, {
    vp_init:function () {


        typeComb = vp.ctrl.bb.typeCombo({
            listId:"customertypeid",
            onChange:function (newValue, oldValue) {
                var pd = true;
                var i;
                for (i = 0; i < arrT.length; i++) {
                    if (arrT[i] == newValue) {
                        pd = false;
                        dqString = arrS[i];
                        break;
                    }
                }


                if (pd) {
                    arrT[i] = newValue;
                    arrS[i] = "";
                    dqString = arrS[i];
                }


                dqNum=i;


                typeChange();
            }
        });
        select1=document.getElementsByName("select1")[0];
        select2=document.getElementsByName("sheet2")[0];
    },


    //从json对象给页面输入框赋值
    loadData:function (data) {
        $("#sskeyid").val(data["sskeyid"]);
        $("#sssheetid").val(data["sssheetid"]);
        $("#typesheetid").val(data["typesheetid"]);
    },
    //保存校验
    checkValid:function () {
        $("#typesheetid").val("");
        for(var i=1;i<arrT.length;i++){
            $("#typesheetid").val($("#typesheetid").val()+arrT[i]+":"+arrS[i]+"|");
        }
        return true;
    }
});


function loadTypeSheet(){
    var tempid ;
    if($("#typesheetid").val()!=""){
//        alert($("#typesheetid").val());
        tempid =$("#typesheetid").val().split("|");
        for(var i=0;i<tempid.length;i++){
            if(tempid[i]!=null&&tempid[i]!=""){
                var typeid=tempid[i].split(":");
                arrT[i]=typeid[0];
                arrS[i]=typeid[1];
            }
        }
        change("menu2");
    }
}


function change(name) {
    if (name == "menu1") {
        document.all.menu1.checked = "checked";
        document.all.add1.disabled = "true";
        document.all.add2.disabled = "true";
        document.all.back1.disabled = "true";
        document.all.back2.disabled = "true";
        document.all.select1.disabled = "disabled";
        document.all.sheet2.disabled = "disabled";
        document.all.rmenu.value = "0";
    } else {
        document.all.menu2.checked = "checked";
        document.all.add1.disabled = "";
        document.all.add2.disabled = "";
        document.all.back1.disabled = "";
        document.all.back2.disabled = "";
        document.all.select1.disabled = "";
        document.all.sheet2.disabled = "";
        document.all.rmenu.value = "1";
    }
}


function typeChange(obj) {
    var temp = dqString.split(",");
    select2=document.getElementsByName("sheet2")[0];
    select1=document.getElementsByName("select1")[0];
    clearItem(select2);
    if (temp.length > 0) {
        for (var i = 0; i < temp.length; i++) {
            if (temp[i] != "") {
                for (var j = 0; j < select1.options.length; j++) {
                     if(select1.options[j].value==temp[i]){
                         var item=new Option(select1.options[j].text, select1.options[j].value);
                         select2.options.add(item);
                         break;
                     }
                }
            }
        }
    }
}


function clearItem(obj){
    if(obj.options.length>0){
        for(var i=obj.options.length-1;i>=0;i--){
            obj.options.remove(i);
        }
    }
}


//分配新的表单
function AddItem() {
    for (var i = 0; i < select1.options.length; i++) {
        if (select1.options[i].selected == true) {
            var pd=true;


            for(var j=0;j<select2.options.length;j++){
                if(select2.options[j].value==select1.options[i].value){
                    pd=false;
                    break;
                }
            }


            if(pd){
                var selectItem = new Option(select1.options[i].text, select1.options[i].value);
                select2.options.add(selectItem);
                dqString+=select1.options[i].value+",";
            }
        }
    }


    arrS[dqNum]=dqString;
}
//
function AddAllItem() {
    for (var i = select1.options.length-1; i >=0 ; i--) {
        if (select1.options[i].selected == true) {
            var pd=true;


            for(var j = select2.options.length-1;j>=0;j--){
                if(select2.options[j].value==select1.options[i].value){
                    pd=false;
                    break;
                }
            }


            if(pd){
                var selectItem = new Option(select1.options[i].text, select1.options[i].value);
                select2.options.add(selectItem);
                dqString+=select1.options[i].value+",";
            }
        }
    }


    arrS[dqNum]=dqString;
}


function BackItem() {
    for (var i = select2.options.length-1; i >=0; i--) {
        if (select2.options[i].selected == true) {
            dqString=dqString.replace(select2.options[i].value+",","");
            select2.options.remove(i);
        }
    }


    arrS[dqNum]=dqString;
}
//
function BackAllItem() {
    for (var i = select2.options.length-1; i >=0; i--) {
        //if (select2.options[i].selected == true) {
            dqString=dqString.replace(select2.options[i].value+",","");
            select2.options.remove(i);
        //}
    }


    arrS[dqNum]=dqString;
}


//OPTION排序
function sortItem(objTo) {
    var ln = objTo.options.length;
    var arrText = new Array();
    var arrValue = new Array();
    for (var i = 0; i < ln; i++) {
        arrText[i] = objTo.options[i].text;
    }
    arrText.sort();
    for (var i = 0; i < ln; i++) {
        for (var j = 0; j < objTo.options.length; j++) {
            if (arrText[i] == objTo.options[j].text) {
                arrValue[i] = objTo.options[j].value;
                break;
            }
        }
    }
    while (ln--) {
        objTo.options[ln] = null;
    }
    for (i = 0; i < arrText.length; i++) {
        objTo.add(new Option(arrText[i], arrValue[i]));
    }
}