前端之下拉列表项的转移（通过一个函数传参实现）

最新推荐文章于 2022-04-15 15:31:49 发布

原创最新推荐文章于 2022-04-15 15:31:49 发布 · 816 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#下拉列表 #文本转移 #前端 #js

前端实用总结专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现下拉列表项双向转移的方法，并详细解释了代码中的关键部分，包括如何处理选中的选项及其实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天带来的是js实现的下拉列表项的转移，其中有两个特别需要注意的地方，一个是在按钮中调用函数时参数的传递，一个是表单对象的name可不可以当作参数传递。

首先我把代码给出：（直接复制就可以测试效果了）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>下拉框的文本转移</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.wide {
				width: 400px;
				margin: 0 auto;
			}
			
			.selcetwords {
				width: 100px;
			}
		</style>
		<script type="text/javascript">
			function moveWords(oldwords,newwords) {
					
				var words = new Array();//用来保存单词的数组
				//用来获得选中的单词的value
				var temp = 0;//用来保存选中的单词数
				//保存选中的单词
				
				for(var i = 0; i < document.getElementById(oldwords).options.length; i++) {
					//判断是否选中
					if (document.getElementById(oldwords).options[i].selected) {
						//将选中的单词保存
						words[temp] = document.getElementById(oldwords).options[i].value;
						//增加要保存单词的长度
						temp ++;
					}
				}
				//删除已经被选中保存的单词
				for (var i = 0;i < words.length;i++) {
					for(var j = 0; j < document.getElementById(oldwords).options.length; j++){
						if (words[i] == document.getElementById(oldwords).options[j].value) {
							document.getElementById(oldwords).options[j].remove();
						}
					}
				}
				//赋值到目的列表
				for (var i = 0;i < words.length;i++) {
					newOption = new Option(words[i],words[i]);
					//增加列表项
					document.getElementById(newwords).options.add(newOption);
				}
			}
		</script>
	</head>

	<body>
		<div class="wide">
			<form action="#" method="post" name="myform">
				<select size="10" name="leftwords" id="leftwords" class="selcetwords" multiple="multiple">
					<option value="aaa">aaa</option>
					<option value="bbb">bbb</option>
					<option value="ccc">ccc</option>
					<option value="ddd">ddd</option>
				</select>
				<input type="button" name="" id="" value="右移" onclick="moveWords('leftwords','rightwords')"/>
				<input type="button" name="" id="" value="左移" onclick="moveWords('rightwords','leftwords')"/>
				<select size="10" name="rightwords" id="rightwords" class="selcetwords" multiple="multiple">
					<option value="xxx">xxx</option>
					<option value="yyy">yyy</option>
					<option value="zzz">zzz</option>
				</select>
			</form>
		</div>
	</body>

</html>

我来回答一下要注意的两个问题：

第一个：自己命名的参数可以加单引号。要不然会被当成未被命名的变量，加上双引号也不行

第二个：在表单的按钮中调用函数所传递的参数应该是表单所具有的参数和值。当然传递name也可以，相当于传递了自定义参数，但是现在一般都是使用id.使用id的时候不加上双引号就行。