javascript点击按钮实现右移操作 DOM

<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>Document</title>

	<script>
	function removeLeft(){
	//找到当前选中的option
	var lefeSelect = document.getElementById("left");
	var selectedIndex = lefeSelect.selectedIndex;
	var selectedOption = lefeSelect.options[selectedIndex];

	//找到右边的select
	var rightSelect = document.getElementById("right");
	rightSelect.add(selectedOption,null);
	}

	function removeLeftAll(){
	//left的所有option，都移动right
	var lefeSelect = document.getElementById("left");

	//找到右边的select
	var rightSelect = document.getElementById("right");
	var length =lefeSelect.options.length;
	for(var i=0;i<length;i++){
	rightSelect.add(lefeSelect.options[0]);
	}

	}


	</script>
	</head>
	<body>

	<table align="center">
	<tr>
	<td>
	<select size="10" id="left">
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	<option>选项4</option>
	<option>选项5</option>
	<option>选项6</option>
	<option>选项7</option>
	<option>选项8</option>
	<option>选项9</option>

	</select>
	</td>
	<td>
	<input type="button" value="--->" onclick="removeLeft()"/><br/>
	<input type="button" value="===>" onclick="removeLeftAll()"/><br/>
	</td>
	<td>
	<select size="10" id="right">


	</select>
	</td>
	</tr>
	</table>

	</body>
	</html>

时间： 2024-10-25 17:55:44

javascript点击按钮实现右移操作 DOM的相关文章

JavaScript点击按钮显示确认对话框

//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My First Script</title> <script type=&q

前端学习代码实例-JavaScript点击按钮弹出层效果

强大的效果其实都是由一个个简单的功能组合而成的,下面介绍一下如何实现点击一个按钮弹出一个层的效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:73

javascript点击按钮实现隐藏显示切换效果

原文链接:http://www.jb51.net/article/79083.htm <html> <head> <meta charset="gb2312"> <title>隐藏和显示</title> <style type="text/css"> #thediv { width:200px; height:100px; line-height:100px; text-align:center

写这个函数的缘由就不必多说了,必然是:有需求,但网上又没有找到可用的代码:没办法,为了混口饭吃就必须自己写来实现需求啦!(本人第一次写博客,技术渣渣,为了提高水平,就来水博园了,内心窃喜!) 为了实现这个需求,看了很多博文,找了很多资料,奈何很多都是使用window.clipboardData.setData()之类的,现在的浏览器好像都不支持这个属性吧!(至少chrom和fireFox是不行的!),另外的就是写得很杂很乱,没有封装成一个方法:所以,我为了以后的使用方便就封装了一个兼容性不错的复

JavaScript点击按钮创建一个表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; border: 1px solid pink; } </style> </head> <body> <

节点之点击按钮设置div中p标签改变背景颜色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 300px; height: 450px; border: 1px solid red; } </style> </head> <body> <input type="but

JavaScript DOM操作案例点击按钮修改div的属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="修改属性" id="bt"/> <div id=&q

JavaScript DOM操作案例点击按钮通过类样式的方式显示跟隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } .cls { display: none; } </style> </h