记录一次学习网页左右下拉框通过js互换值

最新推荐文章于 2024-12-19 05:05:00 发布

原创最新推荐文章于 2024-12-19 05:05:00 发布 · 401 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript

本文介绍如何使用JavaScript实现两个下拉框之间的值互换功能，包括选中项移动和全部移动，同时探讨了保留原数据和不保留原数据的两种方式。

通过js交换下拉框值

包括选中移动和全部移动，保留原数据和不保留原数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉框值左右互换</title>
	</head>
	<script type="text/javascript">
		function climeL() {
			var selectL = document.getElementById('left');
			var options = selectL.options; //获得是option数组
			var selectR = document.getElementById('right');
			for (var i = 0; i < options.length; i++) {
				var value = options[i]; //分别遍历每一个option
				//此处获得的是option类型
				if (value.selected) {
					var optionR = document.createElement('option');
					/* var txt=document.createTextNode(value.value);
					optionR.appendChild(txt); 
					----此方法保留原下拉框的值*/
					optionR.appendChild(value);//此方法不保留原下拉框的值
					selectR.appendChild(optionR);
					
				}
			}
		}

		function climeLall() {
			var selectL = document.getElementById('left');
			var options = selectL.options; //获得是option数组
			var selectR = document.getElementById('right');
			var len=options.length;//获得初始长度
			for (var i = 0; i < len ; i++) {
				var value = options[0]; 
				//此处获得的是option类型
				var optionR = document.createElement('option');
				/* var txt=document.createTextNode(value.value);
				optionR.appendChild(txt); 
				----此方法保留原下拉框的值*/
				optionR.appendChild(value);//此方法不保留原下拉框的值
				selectR.appendChild(optionR);
				
			}
		}

		function climeR() {
			var selectR = document.getElementById('right');
			var options = selectR.options; //获得是option数组
			var selectL = document.getElementById('left');
			for (var i = 0; i < options.length; i++) {
				var value = options[i]; //分别遍历每一个option
				//此处获得的是option类型
				if (value.selected) {
					var optionL = document.createElement('option');
					/* var txt=document.createTextNode(value.value);
					optionL.appendChild(txt); 
					----此方法保留原下拉框的值*/
					optionL.appendChild(value);//此方法不保留原下拉框的值
					selectL.appendChild(optionL);
				}
			}
		}
		
		function climeRall(){
			var selectR = document.getElementById('right');
			var options = selectR.options; //获得是option数组
			var selectL = document.getElementById('left');
			var len=options.length;//获得初始长度
			for (var i = 0; i < len ; i++) {
				var value = options[0]; 
				//此处获得的是option类型
				var optionL = document.createElement('option');
				/* var txt=document.createTextNode(value.value);
				optionL.appendChild(txt); 
				----此方法保留原下拉框的值*/
				optionL.appendChild(value);//此方法不保留原下拉框的值
				selectL.appendChild(optionL);
				
			}
		}
	</script>
	<body>
		<select id="left" multiple="multiple">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
		</select>
		<select id="right" multiple="multiple">
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
		</select>
		<br>
		<button id="bt" onclick="climeL()">&gt;</button><!--向右移动左边选中的-->
		<button id="bt" onclick="climeR()">&lt;</button><!--向左移动右边选中的-->
		<br>
		<button id="bt" onclick="climeLall()">&gt;&gt;&gt;</button><!--向右移动左边全部的-->
		<button id="bt" onclick="climeRall()">&lt;&lt;&lt;</button><!--向左移动右边全部的-->
		<div id="div1"></div>
	</body>
</html>