<!DOCTYPE html>
<html>
<head>
<title>moveOption.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
    //声明全局变量
    var loptionDom; //左边的select对应的Dom对象
    var roptionDom; //右边的select对应的DOM对象
    //窗体加载完毕 获取dom对象
    window.onload = function() {
        //获取左边的select对应的Dom对象
        loptionDom = document.getElementById("loption");
        //获取右边的select对应的DOM对象
        roptionDom = document.getElementById("roption");
    };
    //向右移动
    function moveRight(value) {
        //获取左边select所有的option集合对象
        var options = loptionDom.options;
        //判断是否是单个移动
        if (value == 1) {
            //记住要移动的option对象
            var remberoptionDom = null;
            //记住要移动的option的数量
            var count = 0;
            //遍历options集合对象
            for (var i = 0; i < options.length; i++) {
                //获取option对象
                var optionDom = options[i];
                //判断是否是选中的option对象selected="selected"
                if (optionDom.selected) {
                    //赋值
                    remberoptionDom = optionDom;
                    //数量递增
                    count++;
                }
            }

//判断数量是否是1 如果是1代表移动一个
            if (count == 1) {
                //添加到了右边
                roptionDom.appendChild(remberoptionDom);
                //左边要移除
                loptionDom.removeChild(remberoptionDom);
            } else if (count == 0) {
                alert("请选择要移动的数据");
            } else {
                alert("请选择==>移动");
            }
        } else if (value == 0) {
            //遍历操作                为啥 一定要写成    i=options.length-1  ; i>=0;i--
            for (var i = options.length - 1; i >= 0; i--) {
                //获取option对象
                var optionDom = options[i]; //options[0]  //8
                //判断是否被选中
                if (optionDom.selected) {
                    //左边要移除
                    loptionDom.removeChild(optionDom);
                    //添加到了右边
                    roptionDom.appendChild(optionDom);
                }
            }
        }
    }
    //向左移动
    function moveLeft(value) {
        if (value == 1) {
        } else if (value == 0) {
        }
    }
</script>
</head>

<body>
    <!-- 左右移动的整个代码 -->
    <div style="width: 400px; height: 280px;margin: 0px auto;">
        <!-- 左边的代码 -->
        <div style="width: 100px; float:left;">
            <select multiple="multiple" style="height: 200px; width: 80px;"
                id="loption">
                <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>
        </div>

<!-- 中间代码 -->
        <div style="width: 100px;float: left;margin-right: 30px;">
            <ul style="list-style: none;">
                <li><input type="button" value="-->"
                    style="width: 40px; margin-bottom: 15px;" onclick="moveRight(1)" />
                    <input type="button" value="==>"
                    style="width: 40px;margin-bottom: 15px;" onclick="moveRight(0)" />
                    <input type="button" value="<--"
                    style="width: 40px;margin-bottom: 15px;" onclick="moveLeft(1)" /> <input
                    type="button" value="<==" style="width: 40px;margin-bottom: 15px;"
                    onclick="moveLeft(0)" /></li>
            </ul>
        </div>

<!-- 右边代码 -->
        <div style="width: 100px; float: left; ">
            <select multiple="multiple" style="height: 200px; width: 80px;"
                id="roption"></select>
        </div>

</div>

</body>
</html>

效果：

JavaScript学习记录总结（九）——移动添加效果的更多相关文章

  1. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  2. Lua和C++交互 学习记录之九：在Lua中以面向对象的方式使用C++注册的类

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 在 ...

  3. JavaScript学习记录三

    title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  4. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  5. JavaScript学习记录一

    title: JavaScript学习记录一 toc: true date: 2018-09-11 18:26:52 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  6. ElasticSearch 学习记录之ES查询添加排序字段和使用missing或existing字段查询

    ES添加排序 在默认的情况下,ES 是根据文档的得分score来进行文档额排序的.但是自己可以根据自己的针对一些字段进行排序.就像下面的查询脚本一样.下面的这个查询是根据productid这个值进行排 ...

  7. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  8. JavaScript学习记录总结（七）——dom对象应用之用户简单管理

    <!DOCTYPE html><html><head><title>users.html</title> <meta name=&qu ...

  9. javascript 学习总结（九）面向对象编程

    1.面向对象的工厂方法 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; ...

随机推荐

  1. Redhat6.x下如何制作虚拟机快照和镜像封装

    一.虚拟机快照 1.确认你的物理机上的vg还有足够的剩余空间 [root@hacker ~]# vgs  VG        #PV #LV #SN Attr   VSize  VFree   vg_ ...

  2. 【干货来了】2014年K2房地产IT分享峰会

    2014年K2房地产IT分享峰会已圆满落幕,嘉宾们纷纷出招,分享干货,现场妙语连珠不断,高潮迭起. 主题:流程驱动的地产业务管控平台 嘉宾:王寿欣(卓越地产战略与运营管理部 副总经理) 卓越地产应用K ...

  3. K2上海总部技术培训分享笔记

    第一部门 WinDdg 入门指南 1.NGen.exe --> native code 预编译,省去了.NET程序编译器JIT过程,是程序第一次运行也非常快. NGen 参考资料:http:// ...

  4. SWPFILE实现（增加swap空间）

    1.mkdir /var/swap chmod  700  /var/swap(可以不用设置) 2.dd if=/dev/zero of=/var/swap/file bs=1024 count=65 ...

  5. JavaScript常用检测脚本（正则表达式）

    转自:http://www.cnblogs.com/skylaugh/archive/2006/09/25/514492.html 文件名称:check.js 说明:JavaScript脚本,用于检查 ...

  6. LeetCode222 Count Complete Tree Nodes

    对于一般的二叉树,统计节点数目遍历一遍就可以了,但是这样时间复杂度O(n),一下就被卡住了. 这题首先要明白的是,我们只需要知道叶子节点的数目就能统计出总节点树. 想法1: 既然是完全二叉树,我肯定是 ...

  7. Python 安全类目推荐 (持续更新)

    推荐学习书目 › Learn Python the Hard Way › Python 学习手册 › Python Cookbook › Python 基础教程 Python Sites › PyPI ...

  8. ES6:模块简单解释

    modules是ES6引入的最重要的一个特性. 以后写模块的时候就直接按照ES6的modules语法来写 ,然后用babel+browserify 来打包就行了. modules规范分两部分,一部分是 ...

  9. windows socket网络编程基础知识

    下面介绍网络7层协议在WINDOWS的实现: 7层协议 WIN系统 ________________________________________ 7 应用层 7 应用程序 ____________ ...

  10. ADO.NET系列之操作XML

    如题,我们保存数据的方式有很多种.在ASP.NET中,可以通过js赋值隐藏域的方式,也可以通过ViewState,Session这样的内置对象,还可以通过数据库的形式.现在经常用到的就是XML了,它的 ...