JS-表单移动选项卡特效 - html

首页 > 博客列表 > JS-表单移动选项卡特效

博主信息

博文 250

粉丝 3

访问量 370664

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		select{
			width:150px;
			height:200px;
			float:left;
			}
		div{
			width:100px;
			height:200px;
			float:left;
			}
	</style>
</head>
<body>
	<select name="" id="cid" multiple>
		<option value="0">琦琦</option>
		<option value="1">旺儒</option>
		<option value="3">三金</option>
		<option value="4">狗哥</option>
		<option value="5">金铭</option>
		<option value="6">想想</option>
		<option value="7">令锋</option>
	</select>
	<div>
		<button onclick="func('cid','mid')">>>></button>
		<button onclick="func('mid','cid')"><<<</button>
	</div>
	<select name="" id="mid" multiple></select>
</body>
<script type="text/javascript">
	function func(id,id1){
		//逻辑关系
		//当你点击>>> obj 是cid
		//当你点击<<< obj 是mid
		obj = document.getElementById(id);
		//当你点击>>> obj1 是mid
		//当你点击<<< obj1是cid
		obj1 = document.getElementById(id1);
		//获取到全部的select所有的option标签内容，option是可以获取到当前对象下面所有的option标签的
		op = obj.options;
		//遍历所有的option标签，得到option单独的对象
		for(var i=0;i<op.length;i++){
			if(op[i].selected){
				//取消默认选中的内容
				op[i].selected = false;
				//移动option标签
				obj1.add(op[i]);
				//因为我们的数组每次都要重新排序，所以我们只移动第一个
				i--;
			}
		}
	}
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例