多选上拉框数据操作 _Web前端

多选下拉框数据操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
	<script language="javascript">
		function leftMove(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect2.options.length;i++){
				if(mailSelect2.options[i].selected){
					var opt = document.createElement("option");
					opt.value = mailSelect2.options[i].value;
					opt.text = mailSelect2.options[i].text;
					mailSelect1.add(opt);
					mailSelect2.options.removeChild(mailSelect2.options[i--]);
				}
			}
		}
		function leftMoveAll(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect2.options.length;i++){
				var opt = document.createElement("option");
				opt.value = mailSelect2.options[i].value;
				opt.text = mailSelect2.options[i].text;
				mailSelect1.add(opt);
				mailSelect2.options.removeChild(mailSelect2.options[i--]);
			}
		}
		function rightMove(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect1.options.length;i++){
				if(mailSelect1.options[i].selected){
					var opt = document.createElement("option");
					opt.value = mailSelect1.options[i].value;
					opt.text = mailSelect1.options[i].text;
					mailSelect2.add(opt);
					mailSelect1.options.removeChild(mailSelect1.options[i--]);
				}
			}
		}
		function rightMoveAll(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect1.options.length;i++){
				var opt = document.createElement("option");
				opt.value = mailSelect1.options[i].value;
				opt.text = mailSelect1.options[i].text;
				mailSelect2.add(opt);
				mailSelect1.options.removeChild(mailSelect1.options[i--]);
			}
		}
	</script>
 <BODY>
	<center>
		<table>
			<tr>
				<td>
					<select name="mailSelect1" multiple>
						<option value="form1">form1</option>   
						<option value="form2">form2</option>   
						<option value="form3">form3</option>   
						<option value="form4">form4</option>   
					</select>
				</td>
				<td>
					<input type="button" value="<" onclick="leftMove()"/>
					<input type="button" value=">" onclick="rightMove()"/>
					<input type="button" value="<<" onclick="leftMoveAll()"/>
					<input type="button" value=">>" onclick="rightMoveAll()"/>
				</td>
				<td>
					<select name="mailSelect2" multiple>
					<option value="a">--a--</option>   
					<option value="b">--b--</option>   
					<option value="c">--c--</option>   
					<option value="d">--d--</option>   
				</select>
				</td>
			</tr>
		<table>
	</center>
  
 </BODY>
</HTML>