您的位置 首页 javascript教程

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

需求分析

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

技术分析

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来控制下拉列表左右选择

文章地址:https://www.pyhw.net/30369_%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8js%e6%9d%a5%e6%8e%a7%e5%88%b6%e4%b8%8b%e6%8b%89%e5%88%97%e8%a1%a8%e5%b7%a6%e5%8f%b3%e9%80%89%e6%8b%a9-2.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图