点击左侧跳到右侧

时间:2021-12-26 06:22:40

效果图

点击左侧跳到右侧

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>