选择左边多选框的值移动到右边多选框

<SCRIPT language="javascript" charset="utf-8">
	// >  <
	function moveSelected(oSourceSel, oTargetSel) {
		//建立存储value和text的缓存数组
		var arrSelValue = new Array();
		var arrSelText = new Array();
		//此数组存贮选中的options，以value来对应
		var arrValueTextRelation = new Array();
		var index = 0;//用来辅助建立缓存数组
		//存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
		for ( var i = 0; i < oSourceSel.options.length; i++) {
			if (oSourceSel.options[i].selected) {
				arrSelValue[index] = oSourceSel.options[i].value;
				arrSelText[index] = oSourceSel.options[i].text;
				//建立value和选中option的对应关系
				arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
				index++;
			}
		}
		//增加缓存的数据到目的列表框中，并删除源列表框中的对应项
		for ( var i = 0; i < arrSelText.length; i++) {
			var oOption = document.createElement("option");
			oOption.text = arrSelText[i];
			oOption.value = arrSelValue[i];
			oTargetSel.add(oOption);
			//删除源列表框中的对应项
			oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
		}
	}


	// >>> <<<
	function moveAll(oSourceSel, oTargetSel) {
		//建立存储value和text的缓存数组
		var arrSelValue = new Array();
		var arrSelText = new Array();

		//存储所有源列表框数据到缓存数组
		for ( var i = 0; i < oSourceSel.options.length; i++) {
			arrSelValue[i] = oSourceSel.options[i].value;
			arrSelText[i] = oSourceSel.options[i].text;
		}

		//将缓存数组的数据增加到目的select中
		for ( var i = 0; i < arrSelText.length; i++) {
			var oOption = document.createElement("option");
			oOption.text = arrSelText[i];
			oOption.value = arrSelValue[i];
			oTargetSel.add(oOption);
		}
		//清空源列表框数据，完成移动
		oSourceSel.innerHTML = "";
	}

</SCRIPT>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<table>
			<tr>
				<td>
					<SELECT name="left" size="15" multiple style="width:192px;" ondblclick="moveSelected(document.all.left,document.all.right)">//双击移动到右边
						<OPTION value="1">1</OPTION>
						<OPTION value="2">2</OPTION>
						<OPTION value="3">3</OPTION>
						<OPTION value="4">4</OPTION>
						<OPTION value="5">5</OPTION>
						<OPTION value="6">6</OPTION>

					</SELECT>
				</td>
				<td WIDTH='83PX' align='center'>
					<INPUT type="button" value="   >   " onClick="moveSelected(document.all.left,document.all.right)">
					<br>
					<br>
					<INPUT type="button" value="   <   " onClick="moveSelected(document.all.right,document.all.left)">
					<br>
					<br>
					<INPUT type="button" value="  <<<  " onClick="moveAll(document.all.right,document.all.left)">
					<br>
					<br>
					<INPUT type="button" value="  >>>  " onClick="moveAll(document.all.left,document.all.right)">
				</td>
				<td>
					<SELECT name="right" size="15" multiple style="width:192px; "> </SELECT>
				</td>
			</tr>
		</table>
	</body>

</html>

选择左边多选框的值移动到右边多选框

猜你喜欢