双向选择列表框

最新推荐文章于 2021-10-10 09:16:11 发布

是阿花哟

最新推荐文章于 2021-10-10 09:16:11 发布

阅读量856

点赞数

文章标签： HTML5 JavaScript

本文链接：https://blog.csdn.net/aRiverstones/article/details/78591474

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双向选择列表框</title>
<script type="text/jscript">
	function moveinto(){
		var a=document.getElementById("s1").options;
		var b=document.getElementById("s1").selectedIndex;
		document.getElementById("s2").appendChild(a[b].cloneNode(true));
		document.getElementById("s1").removeChild(a[b])
	}
	function moveout(){
		var a=document.getElementById("s2").options;
		var b=document.getElementById("s2").selectedIndex;
		document.getElementById("s1").appendChild(a[b].cloneNode(true));
		document.getElementById("s2").removeChild(a[b])
	}

</script>
<style type="text/css">
	table{
		margin: 0 auto;
		border: #302ABF solid 1px;
	}
	
	td{
		text-align: center;
		width:200px;
		height: 200px;
		border: #302ABF solid 1px;
	}
</style>
</head>

<body>
<form>
	<table>
		<tr>
			<td>
				<h3>待选名单</h3>
				<select id="s1" size="5">
					<option>王进步</option>
					<option>储有为</option>
					<option>储秀英</option>
				</select>
			</td>
			<td>
				<input type="button" onClick="moveout()" value="移出"><br>
				<input type="button" onClick="moveinto()" value="移入">
			</td>
			<td>
				<h3>参加名单</h3>
				<select id="s2" size="5">
					<option>李大可</option>
					<option>徐 莉</option>
					<option>张大为</option>
				</select>
			</td>
		</tr>
	</table>
</form>
</body>
</html>

是阿花哟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
双向选择列表框

双向选择列表框 function moveinto(){ var a=document.getElementById("s1").options; var b=document.getElementById("s1").selectedIndex; document.getElementById("s2").appendChild(a[b].cloneNode(true));
复制链接

扫一扫