左右移动

<table>
			<tr>
				<td>
					<select id="left" multiple="true" style="width:100px" size="10">
						<option>環</option>
						<option>芈</option>
						<option>琅</option>
						<option>琊</option>
						<option>爨</option>
						<option>甄</option>
						<option>槑</option>
						<option>夔</option>
					</select>
				</td>
				<td>
					<input type="button" value=">" id="toRight1"><br>
					<input type="button" value=">>" id="toRight2"><br>
					<input type="button" value=">>>" id="toRight3"><br><br>
					<input type="button" value="<" id="toLeft1"><br>
					<input type="button" value="<<" id="toLeft2"><br>
					<input type="button" value="<<<" id="toLeft3">
				</td>
				<td>
					<select id="right" multiple="true" style="width:100px" size="10">
						
					</select>
				</td>
			</tr>
		</table>


<script type="text/javascript">
	window.onload=function(){
		//给单机按钮派发事件
		document.getElementById("toRight1").onclick=function(){
			//获取左边所选的option
			var arr=document.getElementById("left").options;
			//遍历
			for(var i=0;i<arr.length;i++){
				//判断是否被选中,如果被选中,则添加到右边
				if(arr[i].selected){
			document.getElementById("right").appendChild(arr[i]);
					break;
				}
			}
		}
		//给多移按钮派发事件
		document.getElementById("toRight2").onclick=function(){
			//获取左边所有的option
			var arr=document.getElementById("left").options;
			//遍历
			for(var i=0;i<arr.length;i++){
				//判断是否被选中,如果被选中,则添加到右边
				if(arr[i].selected){
					document.getElementById("right").appendChild(arr[i]);
					i--;
				}
			}
		}
		//给全部移动按钮派发事件
		document.getElementById("toRight3").onclick=function(){
			//获取左边所有的option
			var arr=document.getElementById("left").options;
			//遍历
			for(var i=0;i<arr.length;){
				//判断是否被选中,如果被选中,则添加到右边
				if(arr[i].selected){
					document.getElementById("right").appendChild(arr[i]);
				}
			}
		}
	}
</script>

猜你喜欢

转载自blog.csdn.net/qq1424035130/article/details/84833851