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

今天带来的是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的时候不加上双引号就行。

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

猜你喜欢