如何利用js来控制下拉列表左右选择

互联网 20-5-6

需求分析

在我们的分类管理中，我们要能够去修改我们的分类信息，当我们点击修改的时候，可以跳转到一个能编辑的页面，这里面能够修改分类的名称、分类的描述、以及分类的商品。

技术分析

ondblclick="selectOne()"//双击事件 multiple="multiple"//select标签的属性

代码实现：

<!DOCTYPE html><html> 	<head> 		<meta charset="UTF-8"> 		<title></title> 		<!-- 			步骤分析 				1. 确定事件: 点击事件 :onclick事件 				2. 事件要触发函数 selectOne 				3. selectOne要做一些操作 					(将左边选中的元素移动到右边的select中) 					1. 获取左边Select中被选中的元素 					2. 将选中的元素添加到右边的Select中就可以 		--> 		<script> 			 			function selectOne(){//				1. 获取左边Select中被选中的元素 				var leftSelect = document.getElementById("leftSelect");				var options = leftSelect.options;				 				//找到右侧的Select 				var rightSelect = document.getElementById("rightSelect");				//遍历找出被选中的option 				for(var i=0; i < options.length; i++){					var option1 = options[i];					if(option1.selected){		//				2. 将选中的元素添加到右边的Select中就可以 						rightSelect.appendChild(option1); 					} 				} 			}			 			//将左边所有的商品移动到右边 			function selectAll(){//				1. 获取左边Select中被选中的元素 				var leftSelect = document.getElementById("leftSelect");				var options = leftSelect.options;				 				//找到右侧的Select 				var rightSelect = document.getElementById("rightSelect");				//遍历找出被选中的option 				for(var i=options.length - 1; i >=0; i--){					var option1 = options[i]; 					rightSelect.appendChild(option1); 				} 			}			 			 			 		</script> 	</head> 	<body> 		 		<table border="1px" width="400px"> 			<tr> 				<td>分类名称</td> 				<td><input type="text" value="手机数码"/></td> 			</tr> 			<tr> 				<td>分类描述</td> 				<td><input type="text" value="这里面都是手机数码"/></td> 			</tr> 			<tr> 				<td>分类商品</td> 				<td> 					<!--左边--> 					<div style="float: left;"> 						已有商品<br /> 						<select multiple="multiple" id="leftSelect" ondblclick="selectOne()"> 							<option>华为</option> 							<option>小米</option> 							<option>锤子</option> 							<option>oppo</option> 						</select> 						<br /> 						<a href="#" onclick="selectOne()"> &gt;&gt; </a> <br /> 						<a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a> 					</div> 					<!--右边--> 					<div style="float: right;">  						未有商品<br /> 						<select multiple="multiple" id="rightSelect"> 							<option>苹果6</option> 							<option>肾7</option> 							<option>诺基亚</option> 							<option>波导</option> 						</select> 						<br /> 						<a href="#"> &lt;&lt; </a> <br /> 						<a href="#"> &lt;&lt;&lt; </a> 					</div> 				</td> 			</tr> 			<tr> 				<td colspan="2"> 					<input type="submit" value="提交"/> 				</td> 			</tr> 		</table> 	</body></html>

推荐教程：js入门教程

以上就是如何利用js来控制下拉列表左右选择的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：下拉列表