左右选择小组件

<!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>
		<title>节点属性</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta http-equiv="Cache-Control" content="no-store" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript"> 
	function moveOver(){
		var boxLength = document.choiceForm.backNode.length;
		var selectedItem = document.choiceForm.LeadNode.selectedIndex;
		if(boxLength==-1||selectedItem==-1){
			return;
		}
		var selectedText = document.choiceForm.LeadNode.options[selectedItem].text;
		var selectedValue = document.choiceForm.LeadNode.options[selectedItem].value;
		var i;
		var isNew = true;
		if(boxLength != 0){
			for(i = 0; i < boxLength; i++){
				thisitem = document.choiceForm.backNode.options[i].value;
				thisitemText = document.choiceForm.backNode.options[i].text;
			if(thisitem == selectedValue){
				isNew = false;
				alert(thisitemText+"已被选择！");
				break;
		      }
		   }
		} 
		if(isNew){
			newoption = new Option(selectedText, selectedValue, false, false);
			document.choiceForm.backNode.options[boxLength] = newoption;
		}
		document.choiceForm.LeadNode.selectedIndex=-1;
	}
	function moveOverRedo(){
		var boxLength = document.choiceForm.redoNode.length;
		var selectedItem = document.choiceForm.redoLeadNode.selectedIndex;
		if(boxLength==-1||selectedItem==-1){
			return;
		}
		var selectedText = document.choiceForm.redoLeadNode.options[selectedItem].text;
		var selectedValue = document.choiceForm.redoLeadNode.options[selectedItem].value;
		var i;
		var isNew = true;
		if(boxLength != 0){
			for(i = 0; i < boxLength; i++){
				thisitem = document.choiceForm.redoNode.options[i].value;
				thisitemText = document.choiceForm.redoNode.options[i].text;
			if(thisitem == selectedValue){
				isNew = false;
				alert(thisitemText+"已被选择！");
				break;
		      }
		   }
		} 
		if(isNew){
			newoption = new Option(selectedText, selectedValue, false, false);
			document.choiceForm.redoNode.options[boxLength] = newoption;
		}
		document.choiceForm.redoLeadNode.selectedIndex=-1;
	}
	//lbox:前置节点,rbox:回退节点
	function moveToRight(lbox,rbox){
		var lboxLength=lbox.length;//左边列表长度
		if(lboxLength==0){
			alert("没有数据可以选择！");
			return false;
		}
		var boxLength = rbox.length;//右边列表长度
		var j;
		var isNew=false;
		if(boxLength!=0){									//右边框不为空时
			for(var i=0; i<lbox.length; i++){				//遍历左边框内数据
				if(lbox.options[i].selected){
					var no = new Option();					//新选项
					no.value = lbox.options[i].value;
					no.text = lbox.options[i].text;
					for (j = 0; j < boxLength; j++){		//遍历右边框内数据
						thisitem = rbox.options[j].value;
						if (thisitem == no.value){			//如果值存在
							isNew=false;
							break;
						}else{
							isNew=true;
						}
					}
					if(isNew){								//如果可以添加
						rbox.options[boxLength++] = no;
					}
			   }
			}
		}else{											//右边框为空时
			for(var i=0; i<lbox.length; i++){			//遍历左边框内数据
				if(lbox.options[i].selected){
					var no = new Option();				//新选项
					no.value = lbox.options[i].value;
				    no.text = lbox.options[i].text;
				    rbox.options[boxLength++] = no;
				}
			}
		}
	 }
	//删除一个或多个
	function removeMe(){
		var boxLength = document.choiceForm.backNode.length;
		arrSelected = new Array();
		var count = 0;
		for(i = 0; i < boxLength; i++){
			if(document.choiceForm.backNode.options[i].selected){
				arrSelected[count] = document.choiceForm.backNode.options[i].value;
			}
			count++;
		}
		var x;
		for(i = 0; i < boxLength; i++){
			for(x = 0; x < arrSelected.length; x++){
				if(document.choiceForm.backNode.options[i].value == arrSelected[x]){
					document.choiceForm.backNode.options[i] = null;
				}
			}
			boxLength = document.choiceForm.backNode.length;
	   }
	}
	function removeMeRedo(){
		var boxLength = document.choiceForm.redoNode.length;
		arrSelected = new Array();
		var count = 0;
		for(i = 0; i < boxLength; i++){
			if(document.choiceForm.redoNode.options[i].selected){
				arrSelected[count] = document.choiceForm.redoNode.options[i].value;
			}
			count++;
		}
		var x;
		for(i = 0; i < boxLength; i++){
			for(x = 0; x < arrSelected.length; x++){
				if(document.choiceForm.redoNode.options[i].value == arrSelected[x]){
					document.choiceForm.redoNode.options[i] = null;
				}
			}
			boxLength = document.choiceForm.redoNode.length;
	   }
	}
	//全选
	function moveAll(lbox,rbox){
		var lboxLength=lbox.length;//左边列表长度
		if(lboxLength==0){
			alert("没有数据可以选择！");
			return false;
		}
		var boxLength = rbox.length;//右边列表长度
		var j;
		var isNew=false;
		if(boxLength!=0){//右边框不为空时
			for(var i=0; i<lbox.length; i++){ //遍历左边框内数据
				var no = new Option();//新选项
			    no.value = lbox.options[i].value;
			    no.text = lbox.options[i].text;
			    for (j = 0; j < boxLength; j++){//遍历右边框内数据
			    	thisitem = rbox.options[j].value;
			    	if (thisitem == no.value){//如果值存在
			    		isNew=false;
			    		break;
			    	}else{
			    	 	isNew=true;
			    	}
			    }
			    if(isNew){//如果可以添加
					rbox.options[boxLength++] = no;
				}
			}
		}else{//右边框为空时
			for(var i=0; i<lbox.length; i++) { //遍历左边框内数据
				var no = new Option();//新选项
			    no.value = lbox.options[i].value;
			    no.text = lbox.options[i].text;
			    rbox.options[boxLength++] = no;
			}
		}
	 }
	//全部删除 
	function reMoveAll(flag) {
		if(flag=='0'){
			document.getElementById("backNode").options.length=0;
		}
		if(flag=='1'){
			document.getElementById("redoNode").options.length=0;
		}
	}
	
	function removechild(obj){
		if(obj.selectedIndex==-1){
			return;
		}
		obj.removeChild(obj.options[obj.selectedIndex]);
	}
	
	function getAllBackNodes(){
		var nodes = document.choiceForm.backNode;
		var backNodes = new Array();
		for(var i=0; i<nodes.length; i++) { //遍历左边框内数据
			    backNodes[i] = nodes.options[i].text;
		}
		return backNodes;
	}
	$(function(){
		var buttons = $("#voButtons").val();
		var messages = $("#voMessages").val();
		var expandVos = $("#voexpandVo").val();
		setChecked(buttons);
		setChecked(messages);
		setChecked(expandVos);
	});
	
	function setChecked(values){
		if(values != null && values != ""){
			var array = values.split(",");
			for(var i=0;i<array.length;i++){
				var key = array[i];
				$("#"+key).attr("checked",true);
			}
		}
	}
	
	function getCheckedValues(param){
		var checkedValues = "";
		$("#"+param).find("span").each(function(i){
			var checkBoxObj = $(this).find("input[type='checkbox']");
			if(checkBoxObj.attr("checked")){
				checkedValues += checkBoxObj.attr("id")+",";
			}
		});
		checkedValues = checkedValues.substring(0,checkedValues.lastIndexOf(","));
		return checkedValues;
	}
	var backNodeTo = function(){
		var len = $('#backNode option').length;
		var nodestring = "";
		for(var i=0;i<len;i++){
			nodestring+=document.getElementById("backNode").options[i].value+",";
		};
		if(nodestring.charAt(nodestring.length-1)==","){
			nodestring = nodestring.substring(0,nodestring.length-1);
		}
		return nodestring;
	}
	var redoNodeTo = function(){
		var len = $('#redoNode option').length;
		var nodestring = "";
		for(var i=0;i<len;i++){
			nodestring+=document.getElementById("redoNode").options[i].value+",";
		};
		if(nodestring.charAt(nodestring.length-1)==","){
			nodestring = nodestring.substring(0,nodestring.length-1);
		}
		return nodestring;
	}
	document.onkeypress=function(){
	    if(event.keyCode==13){
	   		return false;
		}
	} 
	
</script>
	</head>
	<body>
		
		<div class="ui-common-form-biserial">
		<form name="choiceForm">
			<div id="buttons">
				<div id="selected" class="ui-custom-process-div" name="selected">
					<table width="100%" border="0" cellspacing="0" class="grid_biserial">
						<tr>
							<td>
								前置节点
							</td>
							<td>
				
								 
							</td>
							<td>
								回退节点
							</td>
						</tr>
						<tr>
							<td width="45%" >
								<select name="LeadNode" ondblclick="moveOver();" size="10" multiple="multiple" style="width: 100%;">
									<option>
										节点1
									</option>
									<option>
										节点2
									</option>
									<option>
										节点3
									</option>
									<option>
										节点1
									</option>
									<option>
										节点2
									</option>
									<option>
										节点3
									</option>
									<option>
										节点1
									</option>
									<option>
										节点2
									</option>
									<option>
										节点3
									</option>
									<option>
										节点2
									</option>
									<option>
										节点3
									</option>
								</select>
								 
							</td>
							<td style="text-align: center;">
								<p style="margin-bottom: 5px; margin-top: -20px;">
									<input type="button"
										onclick="moveToRight(this.form.LeadNode,this.form.backNode);"
										class="buttonPro" style='width:30px'  value=">" />
								</p>
								<p style="margin-bottom: 5px;">
									<input type="button"
										onclick="moveAll(this.form.LeadNode,this.form.backNode);"
										class="buttonPro" style='width:30px' 
										value=">>" />
								</p>
								<p style="margin-bottom: 5px;">
									<input type="button" onclick="removeMe();" 
										class="buttonPro" style='width:30px'   value="<" />
								</p>
								<p>
									<input type="button" onclick="reMoveAll('0');" 
										class="buttonPro" style='width:30px'  value="<<" />
								</p>
			
							</td>
							<td width="45%">
								<select name="backNode" id="backNode"
									ondblclick="removechild(this)" size="10" multiple="multiple"
									style="width: 100%">
								</select>
								 
							</td>
						</tr>
					</table>
				</div>				
							
			</div>
			</form>
		</div>
	</body>
</html>