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

爱被打了一巴掌 2022-05-09 22:04 152阅读 0赞

<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>左到右右到左.html</title>
    <style type="text/css">
    
    </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">
    					 
    					<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="<--" /> 
    					<input
    					name="remove_all" id="remove_all" type="button" class="button" value="<==" />
    				</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>