JavaScript 下拉列表左右选择案例_使用js完成选物效果点击左方箭头被选入左方容器,点击右方箭头被选入右方容器-CSDN博客

本文链接：https://blog.csdn.net/u014565127/article/details/89377903

功能描述

网页设置两个复选框，分别置入一些选项。
下面分别置入两个按钮，点击左边的按钮可以把左边选中的选项移动至右边。右边同理。
如下图所示：
在这里插入图片描述

分析

HTML页面设计

<select name="left" id="left" multiple="multiple" size="7" style="width: 100px;height: 100px;">
	<option value="">洪世贤</option>
	<option value="">林品如</option>
	<option value="">艾莉</option>
	<option value="">唐三藏</option>
	<option value="">孙悟空</option>
</select>
<select name="right" id="right" multiple="multiple" size="7" style="width: 100px;height: 100px;">
	<option value="">洪尚恩</option>
	<option value="">洪国荣</option>
	<option value="">猪八戒</option>
	<option value="">沙和尚</option>
</select>

按钮绑定事件。

<input type="button" value="→" onclick="addToRight()" style="width: 100px;" />
<input type="button" value="←" onclick="addToLeft()" style="width: 100px;" />

JavaScript函数思路：
1. 获取左边的下拉列表对象。
```
var left = document.getElementById("left");
```
2. 读取左边的选项元素至一个集合。
  就是获取下拉列表的子节点，使用getElementsByTagName()方法。
```
var leftop = left.getElementsByTagName("option");
```
3. 获取右边的下拉列表对象。
```
var right = document.getElementById("right");
```
4. 遍历左边的选项元素，如果是选中的状态，就把它添加到右边。
  关键代码：
  判断选中状态：使用selected属性，true为选中，false反之。
  添加到右边：使用appendChild()方法。
  值得注意的是，每次遍历，集合的长度都会减少，而i的值会依次增加，就导致了每取一个就会跳过一个。为了避免这种情况，我们在判断真执行的时候使用i–来规避。
```
for(var i = 0; i < rightop.length; i++) {
				if(rightop[i].selected) {
					left.appendChild(rightop[i]);
					i--;
				}
			}
```

代码

<body>
	<select name="left" id="left" multiple="multiple" size="7" style="width: 100px;height: 100px;">
		<option value="">洪世贤</option>
		<option value="">林品如</option>
		<option value="">艾莉</option>
		<option value="">唐三藏</option>
		<option value="">孙悟空</option>
	</select>
	<select name="right" id="right" multiple="multiple" size="7" style="width: 100px;height: 100px;">
		<option value="">洪尚恩</option>
		<option value="">洪国荣</option>
		<option value="">猪八戒</option>
		<option value="">沙和尚</option>
	</select>
	<br />
	<input type="button" value="→" onclick="addToRight()" style="width: 100px;" />
	<input type="button" value="←" onclick="addToLeft()" style="width: 100px;" />
	<script type="text/javascript">
		function addToRight() {
			var left = document.getElementById("left");
			var right = document.getElementById("right");
			var leftop = left.getElementsByTagName("option");

			for(var i = 0; i < leftop.length; i++) {
				if(leftop[i].selected) {
					right.appendChild(leftop[i]);
					i--;
				}
			}
		}

		function addToLeft() {
			var left = document.getElementById("left");
			var right = document.getElementById("right");
			var rightop = right.getElementsByTagName("option");
			
			for(var i = 0; i < rightop.length; i++) {
				if(rightop[i].selected) {
					left.appendChild(rightop[i]);
					i--;
				}
			}
		}
	</script>
</body>