双项选择器javascript
来源：互联网 发布：数据库安全系统 编辑：程序博客网 时间：2024/04/28 14:01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>双向选择器</title></head><script language="javascript"> function moveOption(oFromList,oToList,bAll){ var nFromLen = oFromList.options.length; //alert(nFromLen); var nToLen = oToList.options.length; //alert(nToLen);var nOldToLen = nToLen;//alert(nOldToLen); var i = 0;while(nFromLen>0){ if(oFromList.options[i].selected||bAll){ oToList[nToLen] = new Option(oFromList.options[i].text,oFromList.options[i].value);nToLen++;oFromList.options[i] = null; }else{ i++; } nFromLen--;} }</script><body bgcolor="pink"><table width="100%" border="1"> <tr> <td> <table width="100%" border="1" > <tr> <td> 区域所属人员： <div align="center"> <select name="leftlist" size="10" multiple="true" style="width:200px;"> <option >wangwei</option> <option >zhangfei</option> <option >zhangyang</option> <option >lihong</option> </select> </div> </td> </tr> </table> </td> <td> <table width="100%" border="1"> <tr> <td><table width="100%" border="1" > <tr> <td> <div align="center"> <input style="width:60px;" type="button" size="20" value=">>" onclick="javascript:moveOption(leftlist, rightlist,false)"> </div> </td> </tr> <tr> <td> <div align="center"> <input style="width:60px;" type="button" size="20" value="<<" onclick="javascript:moveOption(rightlist, leftlist,false)"> </div> </td> </tr> </table></td> </tr> </table> </td> <td> <table width="100%" border="1"> <tr> <td> 可选人员： <div align="center"> <select name="rightlist" size="10" multiple="true" style="width:200px;"> <option >zhangsan</option> <option >lisi</option> </select> </div> </td> </tr> </table> </td> </tr></table></body></html>
