移动选项卡

最新推荐文章于 2022-11-22 11:29:17 发布

唐小白成长记

最新推荐文章于 2022-11-22 11:29:17 发布

阅读量183

点赞数

分类专栏： javascript 文章标签：移动选项卡 javascript

本文链接：https://blog.csdn.net/tangyue1997/article/details/91435073

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	select{
		width: 150px;
		height: 200px;
		float: left;
	}
	div{
		width: 100px;
		height: 200px;
		float: left;
	}
</style>
<body>
	<select name="" id="cid" multiple>
		<option value="0">林志玲</option>
		<option value="1">杨幂</option>
		<option value="2">闫妮</option>
		<option value="3">佟丽娅</option>
		<option value="4">毛晓彤</option>
		<option value="5">凤姐</option>
		<option value="6">宋雨琦</option>
	</select>
	<div>
		<button onclick="func('cid','mid')"> >>>>> </button>
		<button onclick="func('mid','cid')"> <<<<< </button>
	</div>
	
	<select name="" id="mid" multiple="">
		
	</select>
</body>
<script>
	function func(id,id1)
	{
		//获取对象 当你点击 >>> 对象是cid  <<< mid
		// 当你点击    <<<   对象是mid    >>>cid
		obj = document.getElementById(id);
		obj1 = document.getElementById(id1);
		// console.log(obj);
		//获取option标签
		op = obj.options;
		for(i=0;i<op.length;i++)
		{
			if(op[i].selected)
			{	
				//取消默认选中内容
				op[i].selected = false;
				//移动标签到另一标签
				obj1.add(op[i]);
				i--;
			}
		}
	}
</script>
</html>

在这里插入图片描述