Blogger Information
Blog 250
fans 3
comment 0
visits 321716
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS-表单移动选项卡特效
梁凯达的博客
Original
1005 people have browsed it

实例

<!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>

运行实例 »

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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post