点击左侧跳到右侧

Posted 2020-09-10 前端小超人

效果图

JS部分

function moveOption(e1, e2){
    try{
        for(var i=0;i<e1.options.length;i++){
            if(e1.options[i].selected){
                var e = e1.options[i];
                e2.options.add(new Option(e.text, e.value));
                e1.remove(i);
                ii=i-1
            }
        }
    }
    catch(e){}
}

html以及CSS部分

<form method="post" name="myform">
    <table border="0" width="500">
        <tr>
            <td width="200px">
                <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
                    <option value="1">身份证号码</option>
                    <option value="2">银行卡号</option>
                    <option value="3">营业执照号码</option>
                    <option value="4">组织机构代码</option>
                    <option value="5">税务登记号码</option>
                    <option value="6">邮政编码</option>
                    <option value="7">姓名/公司名称</option>
                </select>
            </td>
            <td width="100px" align="center">
                <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
                <br/>
                <input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
            </td>
            <td width="200px">
                <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
                </select>
            </td>        </tr>    </table></form>