双向选择框操作-优快云博客

<!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=utf-8" />
<title>无标题文档</title>

<script language="javascript">
	//得到节点（左select）
	var leftSelect;
	//得到节点（右select）
	var rightSelect;
	//创建select
	function createSelect(){
		var leftSelect=document.createElement("select");
		leftSelect.setAttribute( "id","leftSelect");
		leftSelect.setAttribute("multiple","multiple");
		leftSelect.setAttribute("size",20);
		
		var  rightSelect=document.createElement("select");
		rightSelect.setAttribute( "id","rightSelect");
		rightSelect.setAttribute("multiple","multiple");
		rightSelect.setAttribute("size",20);
		//设置样式 
		leftSelect.style.cssText="width:200px";
		rightSelect.style.cssText="width:200px";
		
		
		//把select添加到表格中
		document.getElementById("tdLeft").appendChild(leftSelect);
		document.getElementById("tdRight").appendChild(rightSelect);
		
		//初始化select列表内容
		for(var i=1;i<=20;i++){
			var oOption=document.createElement("OPTION");
			/*
			oOption.text="Text"+i;
			oOption.value=""+i;
			if(i<=10){
			  	   leftSelect.add(oOption);
			    }else{
				   rightSelect.add(oOption);
			   }
			   */
			   
			 var text=document.createTextNode("Text"+i);
			 oOption.appendChild(text);
			 oOption.setAttribute("value",""+i);
			 if(i<=10){
			  	   leftSelect.appendChild(oOption);
			    }else{
				   rightSelect.appendChild(oOption);
			   }
		  }
		
	//initialSelect(leftSelect,rightSelect);
	}
	
	
	
	/*//初始化select列表内容
	function  initialSelect(leftSelect,rightSelect){
		for(var i=1;i<=20;i++){
			var oOption=document.createElement("OPTION");
			oOption.text="Text"+i;
			oOption.value=""+i;
			if(i<=10){
			  	   leftSelect.add(oOption);
			    }else{
				   rightSelect.add(oOption);
			   }
		  }
		
	}
	*/
	
	//为leftSelect和rightSelect赋值（得到当前的两个select节点，并赋值）
	function updateSelectElement(){
		//获得所有select接点
		var allSelect=document.body.getElementsByTagName("SELECT");
		//获得两个select的子节点集合
		if(allSelect[0].id=="leftSelect"){
			leftSelect=allSelect[0];
			rightSelect=allSelect[1];
			}else{
			leftSelect=allSelect[1];
			rightSelect=allSelect[0];
			}
		}
		
		
		
	//把左select的全部内容移到右select中
	function leftToRightAddAll(){
		updateSelectElement();
		for(var i=leftSelect.childNodes.length-1;i>-1;i--){
			rightSelect.appendChild(leftSelect.childNodes(i))
		}		
	}
	
	
	
	//把右select的全部内容移到左select中
	function  rightToLeftAddAll(){
		updateSelectElement();
			//把左select中的全部子节点,添加到右select中
		for(var i=rightSelect.childNodes.length-1;i>-1;i--){
			leftSelect.appendChild(rightSelect.childNodes(i))
		}
	}
	
	
	//把左列表中选中的项，移动到右列表中
	function addToRight(){
		updateSelectElement();
		var leftOptions=leftSelect.childNodes;
		var length=leftOptions.length;
		//从最后一个开始循环 
    	for(var i=length-1;i>-1;i--){ 
			// alert(i)
 			 var o=leftOptions[i]; 
 		    if(o.selected==true){ 
			rightSelect.appendChild(o);
 			} 
		}
	}
	
	
	
	//把右列表中选中的项，移动到左列表
	function addToleft(){
		updateSelectElement();
		var rightOptions=rightSelect.childNodes;
		var length=rightOptions.length;
		//从最后一个开始循环 
    	for(var i=length-1;i>-1;i--){ 
			// alert(i)
 			 var o=rightOptions[i]; 
 		    if(o.selected==true){ 
			leftSelect.appendChild(o);
 			} 
		}
	}

</script>
</head>

<body οnlοad="createSelect();">
<form action="" method="" >
<table width="606" height="274" border="1">
  <tr>
    <td id="tdLeft" width="250"></td>
    <td  id="center" width="88" align="center">
    <p>&nbsp;</p><input type="button" value=">>" οnclick="leftToRightAddAll();"/>
    <p>&nbsp;</p><input type="button" value=">" οnclick="addToRight()"/>
    <p>&nbsp;</p><input type="button" value="<<" οnclick="rightToLeftAddAll();"/>
    <p>&nbsp;</p><input type="button" value="<" οnclick="addToleft()"/>
    <p>&nbsp;</p>
    </td>
    <td  id="tdRight" width="250"></td>
  </tr>
</table>
</form>
</body>
</html>
移动列表内容
