js如何实现下拉控制列表

互联网 20-5-18

重要属性介绍：

ondblclick="selectOne()"：双击事件

select标签的属性：

multiple="multiple"：

看一下实现效果：

具体实现代码：

<!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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="selectOne()"> &gt;&gt; </a> <br /> 						<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > &lt;&lt; </a> <br /> 						<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > &lt;&lt;&lt; </a> 					</div> 				</td> 			</tr> 			<tr> 				<td colspan="2"> 					<input type="submit" value="提交"/> 				</td> 			</tr> 		</table> 	</body> </html>

推荐教程：js入门教程

以上就是js如何实现下拉控制列表的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

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

标签：控制列表