JavaScript，将某容器当中的元素移到另一个容器中

最新推荐文章于 2021-06-05 12:42:22 发布

银河系栋梁

最新推荐文章于 2021-06-05 12:42:22 发布

阅读量1k

点赞数 1

分类专栏： Java EE

本文链接：https://blog.csdn.net/qq_38861828/article/details/98672622

版权

Java EE 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

注意：document.getElementsByTagName('h1')[0]

<!DOCTYPE html>
<html>
  <head>
    <title>ext3.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
       <div style="float: left;margin-right:  10px">
       <select id="first" size="10" multiple="multiple" ondblclick="leftMove()">
          <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>
       </div>
        <div style="float: left;margin-right:  10px">
            <input id="leftone" onclick="leftone()" type="button" value="------>"/><br><br>
            <input id="leftAll" onclick="leftAll()"  type="button" value="====>"/><br><br>
            <input id="rightone" onclick="rightone()"  type="button" value="<------"/><br><br>
            <input id="rightall" onclick="rightall()"  type="button" value="<===="/><br>
       </div>
       <select id="second" size="10" multiple="multiple" ondblclick="rightMove()">
          <option value="选项9">选项9</option>
       </select>
  </body>
  <script type="text/javascript">
  	//双击左边的元素，移到右边
  	function leftMove(){
  		var ops = document.getElementById('first').getElementsByTagName('option');
  		for (var i = 0; i < ops.length; i++) {
  			if(ops[i].selected){
  				document.getElementById('second').appendChild(ops[i]);
  			}
  		}
  	}
  	
  	//双击右边的元素，移到左边
  	function rightMove(){
  		var ops = document.getElementById('second').getElementsByTagName('option');
  		for (var i = 0; i < ops.length; i++) {
  			if(ops[i].selected){
  				document.getElementById('first').appendChild(ops[i]);
  			}
  		}
  	}
  	
  	//选中左边的元素，移到右边
  	function leftone(){
  		var ops = document.getElementById('first').getElementsByTagName('option');
  		for (var i = 0; i < ops.length; i++) {
  			if(ops[i].selected){
  				document.getElementById('second').appendChild(ops[i]);
  				i--;
  			}
  		}
  	}
  	
  	//将左边所有的元素，移到右边
  	function leftAll(){
  		var ops = document.getElementById('first').getElementsByTagName('option');
  		for (var i = 0; i < ops.length; i++) {
  			document.getElementById('second').appendChild(ops[i]);//ops[i]与ops[0]效果相同
  			i--;
  		}
  	}
  	
  	//选中右边的元素，移到左边
  	function rightone(){
  		var ops = document.getElementById('second').getElementsByTagName('option');
  		for (var i = 0; i < ops.length; i++) {
  			if(ops[i].selected){
  				document.getElementById('first').appendChild(ops[i]);
  				i--;
  			}
  		}
  	}
  	
  	//将右边所有的元素，移到左边
  	function rightall(){
  		var ops = document.getElementById('second').getElementsByTagName('option');
  		for (var i = 0; i < ops.length; i++) {
  			document.getElementById('first').appendChild(ops[i]);//ops[i]与ops[0]效果相同
  			i--;
  		}
  	}
  		
  </script>
</html>

银河系栋梁

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript，将某容器当中的元素移到另一个容器中

注意：document.getElementsByTagName('h1')[0]<!DOCTYPE html><html> <head> <title>ext3.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,k...
复制链接

扫一扫

专栏目录