2017-12-13 19:59:24










<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <select multiple="multiple" size="8" id="left_box">

        <option>水果</option>

        <option>橘子</option>

        <option>苹果</option>

        <option>香蕉</option>

        <option>梨子</option>

        <option>凤梨</option>

        <option>桃子</option>

        <option>樱桃</option>

    </select>

    <select multiple="multiple" size="8" id="right_box">

        <option>购物车</option>

    </select>

    <input id="to_right" onclick="to_right()" value="添加" type="button">

    <input id="to_left" onclick="to_left()" value="取消" type="button">

    <script>

        var box_r=document.getElementById("right_box");  // 找到右边盒子对象

        var box_l=document.getElementById("left_box");   // 找到左边盒子对象

        var options=box_l.getElementsByTagName("option"); //找到左盒子下的所有option数组  （1）

        function to_right() {                            // 移动到右边盒子方法

            for (var i=0;i<options.length;i++){

                var op=options[i];

                if(op.selected==true){                           //option有个属性，如果选中就自动加入了selected属性 所以通过这个逻辑来找出选中的option

                    box_r.appendChild(op);                       //appendChild方法不光是创建元素,还可以移动元素

                    i--;

                }

            }

        }

        function to_left() {                                   //移动到左边盒子的方法

            var options=document.getElementById("right_box").getElementsByTagName("option"); //（2）

            for (i in options){

                var op=options[i];

                if(op.selected==true){

                    box_l.appendChild(op);

                }

            }

        }

    </script>

</body>

</html>





　　


注：代码里用了2种循环的写法，效果略有不同。标记的2处的options其实用左边盒子和右边效果一样。


												


											
js 中移动元素的方法的更多相关文章
	

    
								
  1. js中迭代元素特性与DOM中的DocumentFragment类型 笔记
		
    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...
    
		
    2. 
						
  2. JS中获取元素属性的逆天大法
		
    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val()  ...
    
		
    3. 
						
  3. PHP从数组中删除元素的方法
		
    PHP从数组中删除元素的方法 本篇文章主要介绍了PHP从数组中删除元素的四种方法实例 删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: 1 2 3 4 5 <?php   $ ...
    
		
    4. 
						
  4. PHP实现查询两个数组中不同元素的方法
		
    以下实例讲述了PHP实现查询两个数组中不同元素的方法.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21  ...
    
		
    5. 
						
  5. node.js中的url.parse方法使用说明
		
    node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...
    
		
    6. 
						
  6. 在Js中得到元素的子元素集合注意事项
		
    http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...
    
		
    7. 
						
  7. python中列表元素连接方法join用法实例
		
    python中列表元素连接方法join用法实例 这篇文章主要介绍了python中列表元素连接方法join用法,实例分析了Python中join方法的使用技巧,非常具有实用价值,分享给大家供大家参考.  ...
    
		
    8. 
						
  8. python去除列表中重复元素的方法
		
    列表中元素位置的索引用的是L.index 本文实例讲述了Python去除列表中重复元素的方法.分享给大家供大家参考.具体如下: 比较容易记忆的是用内置的set 1 2 3 l1 = ['b','c', ...
    
		
    9. 
						
  9. jquery iframe父子框架中的元素访问方法
		
    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. .net core  .NET Core与.NET Framework、Mono之间的关系
			
    .NET Core与.NET Framework.Mono之间的关系 首先想要知道.NET Core与.NET Framework.Mono之间的关系,就必须他们分别是什么,有什么用途? 一. .ne ...
    
			
    2. 
						
  2. 第八篇 Python异常
			
    程序在运行时,如果Python解释器遇到一个错误,会停止程序的执行,并且提示一些错误信息,这就是异常,程序通知执行并且提示错误信息,这个动作,我们通常称之为:抛出异常. 1.简单的捕获异常的语法 在程 ...
    
			
    3. 
						
  3. mysqldump备份以tmp_开头的表
			
    需要备份warehouse这个DB下所有以tmp_开头的表名.直接说结论: mysqldump .sql.gz 其中:-Bse是为了将查询中的-----------------等分隔符给屏蔽了. gz ...
    
			
    4. 
						
  4. 题解 P2350 【[HAOI2012]外星人】
			
    题目链接 还是本宝宝写题解的一贯习惯 $ :$ 先吐槽吐槽这道题$……$ 相信不少同学第一眼一定没有看懂题.(因为我也没看懂) ~~初中~~数学知识: 对于函数 $ f(x)$ 有 $f^{-1}(x ...
    
			
    5. 
						
  5. 更改Linux下的时间
			
    1.使用tzseletect glibc-common-2.12-1.192.el6.x86_64 : Common binaries and locale data for glibc Repo : ...
    
			
    6. 
						
  6. Android Gradle 隐形依赖的奇怪案例
			
    相信 Android 开发者都有在 Android Studio 中升级 compileSdkVersion 的经历,这个时候如果你使用了 support 包,并同时升级,那么可能会出现一个错误提示. ...
    
			
    7. 
						
  7. 修改stl::set相关源码，提供有序属性值的查找接口
			
    普通的stl::set,查找时只能传入key_type. 不能使用属性值查找. 例如: /* an employee record holds its ID, name and age */ clas ...
    
			
    8. 
						
  8. 初用sqlite3.exe
			
    1.记得要先建立数据库文件 为了进行数据库的编写,我安装了sqlite3,由于刚接触数据库,我尝试着建立表,并插入元组,属性,用select from语句也可以调出写入的内容,但是不知道如何保存,直接 ...
    
			
    9. 
						
  9. win10系统常用操作
			
    1.打开控制面板 (1)选中“此电脑”,右键选择“属性”. (2)可见 控制面板主页 2.设置环境变量和系统变量 (1)选中“此电脑”,右键选择“属性”. (2)可见 控制面板主页 (3)点击高级系统 ...
    
			
    10. 
						
  10. 将多个单元格内容连接到一个单元格中(EXCEL)
			
    连接符号:& 如下图,我们要将表格中每名员工的姓名.入职时间以及年龄放入到同一个单元格中,形成以“-”连接的形式. 这时我们要用到Excel中的连接符“&”,也就是在按下Shift+数 ...
    
			
    11.