JavaScript专题实例学习二左到右右到左！

最新推荐文章于 2023-08-28 20:00:40 发布
原创最新推荐文章于 2023-08-28 20:00:40 发布 · 176 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#左右选择 #从左到右
js专题专栏收录该内容
5 篇文章
订阅专栏
本文介绍了一个使用HTML和JavaScript实现的动态下拉列表操作案例，包括将选项从一个下拉列表移动到另一个，以及批量移动所有选项的功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>左到右右到左.html</title>
<style type="text/css">
<!--
BODY {
	font-family: "宋体";
	font-size: 12px;
	margin: 0px 0px 0px 0px;
	overflow-x: no;
	overflow-y: no;
	background-color: #B8D3F4;
}

td {
	font_size: 12px;
}

.default_input {
	border: 1px solid #666666;
	height: 18px;
	font-size: 12px;
}

.default_input2 {
	border: 1px solid #666666;
	height: 18px;
	font-size: 12px;
}

.nowrite_input {
	border: 1px solid #849EB5;
	height: 18px;
	font-size: 12px;
	background-color: #EBEAE7;
	color: #9E9A9E;
}

.default_list {
	font-size: 12px;
	border: 1px solid #849EB5;
}

.default_textarea {
	font-size: 12px;
	border: 1px solid #849EB5;
}

.nowrite_textarea {
	border: 1px solid #849EB5;
	font-size: 12px;
	background-color: #EBEAE7;
	color: #9E9A9E;
}

.wordtd5 {
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd {
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd_1 {
	font-size: 12px;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #516CD6;
	color: #fff;
}

.wordtd_2 {
	font-size: 12px;
	text-align: right;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #64BDF9;
}

.wordtd_3 {
	font-size: 12px;
	text-align: right;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #F1DD34;
}

.inputtd {
	font-size: 12px;
	vertical-align: top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

.inputtd2 {
	text-align: center;
	font-size: 12px;
	vertical-align: top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

.tablebg {
	font-size: 12px;
}

.tb {
	border-collapse: collapse;
	border: 1px outset #999999;
	background-color: #FFFFFF;
}

.td2 {
	line-height: 22px;
	text-align: center;
	background-color: #F6F6F6;
}

.td3 {
	background-color: #B8D3F4;
	text-align: center;
	line-height: 20px;
}

.td4 {
	background-color: #F6F6F6;
	line-height: 20px;
}

.td5 {
	border: #000000 solid;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 1px;
}

.tb td {
	font-size: 12px;
	border: 2px groove #ffffff;
}

.noborder {
	border: none;
}

.button {
	border: 1px ridge #ffffff;
	line-height: 18px;
	height: 20px;
	width: 45px;
	padding-top: 0px;
	background: #CBDAF7;
	color: #000000;
	font-size: 9pt;
	font-family: "宋体";
}

.textarea {
	font-family: Arial, Helvetica, sans-serif, "??";
	font-size: 9pt;
	color: #000000;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #000000;
	background-color: transparent;
	text-align: left
}
-->
</style>

<script type="text/javascript">
	// 先注册整个文件加载完成之后的事件
	window.onload = function() {
		//通过id属性值获取add标签对象
		var addButton = document.getElementById("add");
		// 动态给这个addButton添加单击事件
		addButton.onclick = function() {
			// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
			var firstSelect = document.getElementById("first");
			
			// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
			var secondSelect = document.getElementById("second");
			//把左边下拉列表中选中的option添加到右边的select下拉列表中
			// selectObj.selectedIndex是下拉列表中被选中的索引
			secondSelect.appendChild( firstSelect.options[firstSelect.selectedIndex] );
		}
		
		
		
		
		// 通过ID属性值获取全部移到右边的按钮对象
		var add_allButton = document.getElementById("add_all");
		// 动态给这个add_allButton添加单击事件
		add_allButton.onclick = function() {
			// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
			var firstSelect = document.getElementById("first");
			// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
			var secondSelect = document.getElementById("second");
			// 通过遍历把左边的每一个options对象添加到右边的select下拉列表中
			for (var i = 0; i < firstSelect.options.length;) {
				secondSelect.appendChild( firstSelect.options[i] );
			}
		}
		// 
		var removeButton = document.getElementById("remove");
		removeButton.onclick = function() {
			
			// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
			var firstSelect = document.getElementById("first");
			
			// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
			var secondSelect = document.getElementById("second");
			//把左边下拉列表中选中的option添加到右边的select下拉列表中
			// selectObj.selectedIndex是下拉列表中被选中的索引
			firstSelect.appendChild( secondSelect.options[secondSelect.selectedIndex] );
			
		}
		
		var remove_allButton = document.getElementById("remove_all");
		remove_allButton.onclick = function() {

			// 通过id属性查找到first的select下拉列表对象(左边的下拉列表)
			var firstSelect = document.getElementById("first");
			// 通过id属性查找到second的select下拉列表对象(右边的下拉列表)
			var secondSelect = document.getElementById("second");
			// 通过遍历把左边的每一个options对象添加到右边的select下拉列表中
			for (var i = 0; i < secondSelect.options.length;) {
				firstSelect.appendChild( secondSelect.options[i] );
			}
		}
	}
</script>


</head>
<body>
	<div
		style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">

		<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
			style="margin:15px 0px 0px 15px;">
			<tr>
				<td width="126">
					<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--> 
					<select name="first" size="10"
					class="td3" id="first">
						<option value="选项1">选项1</option>
						<option value="选项2">选项2</option>
						<option value="选项3">选项3</option>
						<option value="选项4">选项4</option>
						<option value="选项5">选项5</option>
						<option value="选项6">选项6</option>
						<option value="选项7">选项7</option>
						<option value="选项8">选项8</option>
				</select>
				</td>

				<td width="69" valign="middle">
					<input name="add" id="add" type="button" class="button"
					value="-->" /> 
					<input name="add_all" id="add_all" type="button" class="button" value="==>" />
					<input name="remove" id="remove" type="button" class="button" value="&lt;--" /> 
					<input
					name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
				</td>

				<td width="127" align="left">
					<select name="second" size="10" multiple="multiple"
					class="td3" id="second">
						<option value="选项9">选项9</option>
				</select>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>