option内容左右移动案例

最新推荐文章于 2024-10-03 22:12:17 发布

SHI_LUO_DE_YI_JI

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量200

点赞数

分类专栏： js基础基础文章标签： html js

本文链接：https://blog.csdn.net/SHI_LUO_DE_YI_JI/article/details/108632774

版权

基础同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

js基础

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function selectLeftOne(){
				var leftSelects = document.getElementById("leftSelects");
				var rightSelects = document.getElementById("rightSelects");
				var options = leftSelects.options;
				for(var i=0;i<options.length;i++){				//遍历获得被选中的商品
					var option1 = options[i];
					if(option1.selected){
						rightSelects.appendChild(option1);
					}
				}
			}
			
			function selectLeftAll(){
				var leftSelects = document.getElementById("leftSelects");
				var rightSelects = document.getElementById("rightSelects");
				var options = leftSelects.options;
				for(var i=options.length - 1;i >= 0;i--){				//遍历获得被选中的商品
					var option1 = options[i];
					rightSelects.appendChild(option1);
				}
			}
			
			function selectRightOne(){
				var leftSelects = document.getElementById("leftSelects");
				var rightSelects = document.getElementById("rightSelects");
				var options = rightSelects.options;
				for(var i=0;i<options.length;i++){				//遍历获得被选中的商品
					var option1 = options[i];
					if(option1.selected){
						leftSelects.appendChild(option1);
					}
				}
			}
			
			function selectRightAll(){
				var leftSelects = document.getElementById("leftSelects");
				var rightSelects = document.getElementById("rightSelects");
				var options = rightSelects.options;
				for(var i=options.length - 1;i >= 0;i--){				//遍历获得被选中的商品
					var option1 = options[i];
					leftSelects.appendChild(option1);
				}
			}
			
		</script>
	</head>
	<body>
		<table border="1px" width="400px">
			<tr>
				<td>分类名称</td>
				<td>手机数码</td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td>这里面都是手机数码</td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<div style="float: left;">
						已有商品</br>
						<select multiple="multiple" id="leftSelects" ondblclick="selectOne()">
							<option>华为</option>
							<option>小米</option>
							<option>OPPO</option>
							<option>锤子</option>
						</select>
						</br>
						<a href="#" onclick="selectLeftOne()">&gt;&gt;</a></br>
						<a href="#" onclick="selectLeftAll()">&gt;&gt;&gt;</a>
					</div>
					<div style="float: right;">
						唯有商品</br>
						<select multiple="multiple" id="rightSelects" ondblclick="selectRightOne()">
							<option>苹果7</option>
							<option>苹果8</option>
							<option>苹果9</option>
							<option>苹果10</option>
						</select>
						</br>
						<a href="#" onclick="selectRightOne()">&lt;&lt;</a></br>
						<a href="#" onclick="selectRightAll()">&lt;&lt;&lt;</a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="提交"></td>
			</tr>
		</table>
	</body>
</html>