多选移动列表操作

最新推荐文章于 2023-08-04 15:50:42 发布

溺水行舟

最新推荐文章于 2023-08-04 15:50:42 发布

阅读量1.4k

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/liang5630/article/details/38021635

版权

html+css+js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>多选移动列表操作</title>
		<meta http-equiv='Content-Type' content='text/css;charset=utf-8'/>
		<script>
		</script>
		<style>
			.yemian{
				margin-left:30%;
				width:500px;
				height:400px;
				background-color:cyan;
			}
			.s{
				width:150px;
				height:250px;
			}
			.input{
				width:50px;
				height:30px;
			
			}
		</style>
		<script>
			function move(srcId,desId){
				var src=document.getElementById(srcId);
				var des=document.getElementById(desId);
				var flag=true;
				for(var i=src.length-1;i>=0;i--){
					if(src.options[i].selected){
						var op=new Option(src.options[i].value,src.options[i].text);
						//方法一：
							des.options[des.options.length]=op;
							src.options[i]=null;
						//方法二：下面这条语句除了赋值之外，还删除了src.options数组中的src.options[i]
						//所以不需要执行src.options[i]=null;
							//des.options[des.options.length]=src.options[i];
						flag=false;
					}
				}
				if(flag){
					alert("你必须选择至少一项!");
				}
			}
			function moveAll(srcId,desId){
				var src=document.getElementById(srcId);
				var des=document.getElementById(desId);
				for(var i=src.length-1;i>=0;i--){
					des.options[des.options.length]=src.options[i];
					src.options[i]=null;
				}
			}
		</script>
	</head>
	<body>
		<div class='yemian' >
			<h1 align='center'>多选移动操作</h1>
			<table align='center' cellspacing='20' cellpadding='10px';>
				<tbody>
					<tr>
						<td>
							<select class='s' multiple='multiple' id='left' οndblclick="move('left','right')">
								<option>java</option>
								<option>c++</option>
								<option>数据结构</option>
							</select>
						</td>
					
						<td>
							<input type="button" value='-->' class='input' οnclick="move('left','right')"/><br/>
							<input type="button" value='-->>' class='input' οnclick="moveAll('left','right')"/><br/>
							<input type="button" value='<--' class='input' οnclick="move('right','left')"/><br/>
							<input type="button" value='<<--' class='input' οnclick="moveAll('right','left')"/><br/>
						
						</td>
						<td>
							<select class='s' id='right'  multiple='multiple' οndblclick="move('right','left')" >
							</select>
						</td>
					</tr>
				</tbody>
			</table>
			<div align='center'><input type='submit' value='提交'/></div>
		</div>
	</body>


</html>

溺水行舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多选移动列表操作

多选移动列表操作 .yemian{ margin-left:30%; width:500px; height:400px; background-color:cyan; } .s{ width:150px; height:250px; } .input{ width:50px; h
复制链接

扫一扫