选择待选框选项到已选框

先看实现效果图

捕获.PNG

jsp代码

    <form>
    <table cellspacing="1" width="350px" align="center">
        <tr><th>项目角色维护</th></tr>
        <tr><td><select id="dept"  onchange="check_dept()">
            <option selected="selected">选择项目</option>
            <option value="1">项目1</option>
            <option value="2">项目2</option>
            <option value="3">项目3</option>
        </select></td></tr>
        <tr><td>
        <table style="background-color:white" width="100%">
            <tr>
                <td><select multiple="multiple" size="10" id="left_select" style="width : 152px">
                </select></td>
                <td>
                <input type="button" value=">" style="width:35px" onclick="ltor()"><br>
                <input type="button" value=">>" style="width:35px" onclick="ltorall()"><br>
                <input type="button" value="<" style="width:35px" onclick="rtol()"><br>
                <input type="button" value="<<" style="width:35px" onclick="rtolall()"><br>
                </td>
                <td><select multiple="multiple" style="width : 152px" size="10" id="right_select"></select></td>
            </tr>
        </table>
        </td></tr>
        <tr><td align="center"><input type="button" value="确定" onclick="queDing()"></td></tr>
        <tr>
    </table>
</form>

js代码

function check_dept()
{
    document.getElementById("left_select").options.length=0;
    var os=new Array();
    os=document.getElementById("dept").options;
    i=os[document.getElementById("dept").selectedIndex].value;
    if(i==1){
        var o1=new Option("项目经理","1");
        var o2=new Option("测试人员","2");
        var o3=new Option("设计人员","3");
        document.getElementById("left_select").add(o1);
        document.getElementById("left_select").add(o2);
        document.getElementById("left_select").add(o3);
    }
    if(i==2){
        var o1=new Option("项目经理","1");
        var o2=new Option("测试人员","2");
        var o3=new Option("设计人员","3");
        document.getElementById("left_select").add(o1);
        document.getElementById("left_select").add(o2);
        document.getElementById("left_select").add(o3);
    }
    if(i==3){
        var o1=new Option("项目经理","1");
        var o2=new Option("测试人员","2");
        var o3=new Option("设计人员","3");
        document.getElementById("left_select").add(o1);
        document.getElementById("left_select").add(o2);
        document.getElementById("left_select").add(o3);
    }
}
function ltor()
{
    var os=new Array();
    os=document.getElementById("left_select").options;
    for(i=0;i<os.length;i++){
        if(os[i].selected){
            var o=new Option(os[i].text,os[i].value);
            document.getElementById("right_select").add(o);
            document.getElementById("left_select").remove(i);
            i--;
        }
    }
}
function rtol()
{
    var os=new Array();
    os=document.getElementById("right_select").options;
    for(i=0;i<os.length;i++){
        if(os[i].selected){
            var o=new Option(os[i].text,os[i].value);
            document.getElementById("left_select").add(o);
            document.getElementById("right_select").remove(i);
            i--;
        }
    }
}
function rtolall()
{
    var os=new Array();
    os=document.getElementById("right_select").options;
    for(i=0;i<os.length;){
        var o=new Option(os[i].text,os[i].value);
        document.getElementById("left_select").add(o);
        document.getElementById("right_select").remove(i);
    }
}
function ltorall()
{
    var os=new Array();
    os=document.getElementById("left_select").options;
    for(i=0;i<os.length;){
        var o=new Option(os[i].text,os[i].value);
        document.getElementById("right_select").add(o);
        document.getElementById("left_select").remove(i);
    }
}
var v;
function queDing(){
    var os=new Array();
    os=document.getElementById("right_select").options;
    v="";
    for(var i=0;i<os.length;i++){
        v+=os[i].value+":"+os[i].text+" ";
    }
    opener.document.forms[0].text.value=v;
    alert(v);
    this.close();
}

具体到后台实现再填坑吧~~