首页 > 代码库 > 点击左侧跳到右侧

点击左侧跳到右侧

效果图

技术分享

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=http://www.mamicode.com/"1">身份证号码</option>
<option value=http://www.mamicode.com/"2">银行卡号</option>
<option value=http://www.mamicode.com/"3">营业执照号码</option>
<option value=http://www.mamicode.com/"4">组织机构代码</option>
<option value=http://www.mamicode.com/"5">税务登记号码</option>
<option value=http://www.mamicode.com/"6">邮政编码</option>
<option value=http://www.mamicode.com/"7">姓名/公司名称</option>
</select>
</td>
<td width="100px" align="center">
<input type="button" value=http://www.mamicode.com/"添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
<br/>
<input type="button" value=http://www.mamicode.com/"删除" 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>

 

点击左侧跳到右侧