JavaScript+HTML实现商品的左右选择功能

功能简介：如下图所示，将“已有商品”中的商品选中移动到右边的“未有商品”，这里可以选中单个选项移动，也可以实现一次性全部移动。同理，右边中的“未有商品”的选项也可以选中然后移动到左边的“已有商品”区域。

在很多示例中都实现了从左往右移的单一功能，这里实现了双向自由移动的功能。
JavaScript+HTML实现商品的左右选择功能
刚开始写双向移动的时候，遇到了一些问题，就是从右向左移动时会出现左边区域和右边区域选项同时被选中的问题，这样就只是两个元素来回互换，并不能实现自由移动。

后来想到数据结构中的栈，可以利用“栈”中元素的特点，来解决这个问题。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function selectOneLeftToRight()
			{
				//获取左边的元素和右侧的元素
				var selectLeft = document.getElementById("leftSelect");
				var selectRight  = document.getElementById("rightSelect");
				
				var optionsLeft = selectLeft.options;
				
				//遍历找出被选中的元素
				for(var i = 0; i < optionsLeft.length; i++)
				{
					if(optionsLeft[i].selected == true)
					{
						//将左边选中的元素添加到右边
						selectRight.appendChild(optionsLeft[i]);
						//下一步很重要！相当于每次都从剩余的元素栈顶开始遍历
						i--;
					}
				}
			}
			function selectAllLeftToRight()
			{
				//All对应的代码更简单，就是把One的代码拿来，然后少了selected判断的条件
				//因为默认是全部都右移到右边
				var selectLeft = document.getElementById("leftSelect");
				var selectRight  = document.getElementById("rightSelect");
				
				var optionsLeft = selectLeft.options;
				
				for(var i = 0; i < optionsLeft.length; i++)
				{
					selectRight.appendChild(optionsLeft[i]);
					//下一步很重要！相当于每次都从剩余的元素栈顶开始遍历
					i--;
				}
			}
			function selectOneRightToLeft()
			{
				var selectLeft = document.getElementById("leftSelect");
				var selectRight  = document.getElementById("rightSelect");
				
				var optionsRight = selectRight.options;
				
				for(var i = 0; i < optionsRight.length; i++)
				{
					if(optionsRight[i].selected == true)
					{
						selectLeft.appendChild(optionsRight[i]);
						//下一步很重要！相当于每次都从剩余的元素栈顶开始遍历
						i--;
					}
				}
			}
			function selectAllRightToLeft()
			{
				var selectLeft = document.getElementById("leftSelect");
				var selectRight  = document.getElementById("rightSelect");
				
				var optionsRight = selectRight.options;
				
				for(var i = 0; i < optionsRight.length; i++)
				{
					selectLeft.appendChild(optionsRight[i]);
					//下一步很重要！相当于每次都从剩余的元素栈顶开始遍历
					i--;
				}
			}
		</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" "selectOneLeftToRight()">
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" "selectOneLeftToRight()"> &gt;&gt; </a> <br />
						<a href="#" "selectAllLeftToRight()"> &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="#" "selectOneRightToLeft()"> &lt;&lt; </a> <br />
						<a href="#" "selectAllRightToLeft()"> &lt;&lt;&lt; </a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交"/>
				</td>
			</tr>
		</table>
	</body>
</html>

这里解决的一个关键地方就是在for循环里，使得i–再i++，这样i保持不变，每一轮的遍历都是从第一个元素开始（下标为0），因此不会出现左边和右边的元素被同时选中的情况。结合“栈”的思想来想一下。

JavaScript+HTML实现商品的左右选择功能

相关推荐