双项选择器javascript

最新推荐文章于 2021-06-03 17:03:14 发布

qinglang1987

最新推荐文章于 2021-06-03 17:03:14 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wangxw8746/article/details/8994067

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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=">>" οnclick="javascript:moveOption(leftlist, rightlist,false)">
					     </div>
		        </td>
          </tr>
          <tr>
            <td>
					   <div align="center">
					     <input style="width:60px;" type="button" size="20" value="<<" οnclick="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>