点击左侧跳到右侧
效果圖
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">身份證號(hào)碼</option>
<option value="2">銀行卡號(hào)</option>
<option value="3">營(yíng)業(yè)執(zhí)照號(hào)碼</option>
<option value="4">組織機(jī)構(gòu)代碼</option>
<option value="5">稅務(wù)登記號(hào)碼</option>
<option value="6">郵政編碼</option>
<option value="7">姓名/公司名稱(chēng)</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>
?
更多專(zhuān)業(yè)前端知識(shí),請(qǐng)上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
- 上一篇: jquery 实现 点击把数据移动右侧
- 下一篇: 移动端UC /QQ 浏览器的部分私有Me