用javascrip实现两个select互相传递值-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9891/article/details/81734581

本文介绍了一个使用JavaScript实现的从一个下拉菜单向另一个下拉菜单转移选项的功能。该功能包括两个按钮，一个用于将选项从第一个菜单移至第二个菜单，另一个用于反向操作。此功能适用于网页表单中需要动态管理选项的情况。

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



<html>
<head>
<title>xiejiaohui test javascript</title>
<script>
function add() {
	var pos1 = document.getElementById("pos1");
	var pos2 = document.getElementById("pos2");
	for (var i = 0; i < pos1.options.length; i++) {
		if (pos1.options[i].selected) {
			var t = document.createElement("OPTION");
			t.value = pos1.options[i].value;
			t.text = pos1.options[i].text;
			pos2.add(t);
			pos1.options[i] = null;
			i--;
		}
	}
}

function del() {
	var pos1 = document.getElementById("pos1");
	var pos2 = document.getElementById("pos2");
	for ( var i = 0; i < pos2.options.length; i++) {
		if (pos2.options[i].selected) {
			var t = document.createElement("OPTION");
			t.value = pos2.options[i].value;
			t.text = pos2.options[i].text;
			pos1.add(t);
			pos2.options[i] = null;
			i--;
		}
	}
}
</script>
</head>
<body>
<form name="form1" method="post" action="#">
<table>
	<tr>
		<td><select multiple="multiple" name="pos1" id="pos1" >
				<option value="1">aaaa</option>
				<option value="2">bbbb</option>
				<option value="3">cccc</option>
				<option value="4">dddd</option>
			</select></td>
		<td>
		<input type="button" value="add=>" onClick="add()"/><br>
		<input type="button" value="<=del" onClick="del()"/>
		</td>
		<td>
		<select multiple="multiple" name="pos2" id="pos1">
		</select>
		</td>
</form>
</body>
</html>