多选下拉框数据操作

最新推荐文章于 2025-06-20 15:24:56 发布

lcb530

最新推荐文章于 2025-06-20 15:24:56 发布

阅读量121

点赞数

分类专栏： JavaScript 文章标签： HTML C C++ C#

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一段JavaScript脚本，该脚本能实现HTML页面中两个下拉选择框之间的选项移动功能，包括单个移动、全部移动等操作。通过分析脚本代码，展示了如何创建新的选项元素，并在两个选择框之间进行增删操作。

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
	<script language="javascript">
		function leftMove(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect2.options.length;i++){
				if(mailSelect2.options[i].selected){
					var opt = document.createElement("option");
					opt.value = mailSelect2.options[i].value;
					opt.text = mailSelect2.options[i].text;
					mailSelect1.add(opt);
					mailSelect2.options.removeChild(mailSelect2.options[i--]);
				}
			}
		}
		function leftMoveAll(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect2.options.length;i++){
				var opt = document.createElement("option");
				opt.value = mailSelect2.options[i].value;
				opt.text = mailSelect2.options[i].text;
				mailSelect1.add(opt);
				mailSelect2.options.removeChild(mailSelect2.options[i--]);
			}
		}
		function rightMove(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect1.options.length;i++){
				if(mailSelect1.options[i].selected){
					var opt = document.createElement("option");
					opt.value = mailSelect1.options[i].value;
					opt.text = mailSelect1.options[i].text;
					mailSelect2.add(opt);
					mailSelect1.options.removeChild(mailSelect1.options[i--]);
				}
			}
		}
		function rightMoveAll(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect1.options.length;i++){
				var opt = document.createElement("option");
				opt.value = mailSelect1.options[i].value;
				opt.text = mailSelect1.options[i].text;
				mailSelect2.add(opt);
				mailSelect1.options.removeChild(mailSelect1.options[i--]);
			}
		}
	</script>
 <BODY>
	<center>
		<table>
			<tr>
				<td>
					<select name="mailSelect1" multiple>
						<option value="form1">form1</option>   
						<option value="form2">form2</option>   
						<option value="form3">form3</option>   
						<option value="form4">form4</option>   
					</select>
				</td>
				<td>
					<input type="button" value="<" onclick="leftMove()"/>
					<input type="button" value=">" onclick="rightMove()"/>
					<input type="button" value="<<" onclick="leftMoveAll()"/>
					<input type="button" value=">>" onclick="rightMoveAll()"/>
				</td>
				<td>
					<select name="mailSelect2" multiple>
					<option value="a">--a--</option>   
					<option value="b">--b--</option>   
					<option value="c">--c--</option>   
					<option value="d">--d--</option>   
				</select>
				</td>
			</tr>
		<table>
	</center>

 </BODY>
</HTML>