<!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. Windows8 10设置程序为 系统默认浏览器

    从win8 开始,MS修改了文件和协议的关联方式,普通的注册表修改是无效的. 必须使用组策略(group policy )对象GP才行. http://blogs.technet.com/b/mrml ...

  2. （转载）重新对APK文件签名

    1.将证书(debug.keystore)复制到与需要重新签名的apk文件相同的目录下(如:复制到D:\Sign) 2.在cmd中切换到需要重新签名的apk文件的目录下 3.使用WinRAR打开要重新 ...

  3. 大嫂的HTML

      <html>   <head>   <style type="text/css">   *{ margin: 0; padding: 0; ...

  4. JAVA SERVLET专题（下）

    HTTP简介 ·WEB浏览器与WEB服务器之间的一问一答的交互过程必须遵守一定的规则,这个规则就是HTTP协议. ·HTTP是hypertext transfer protocol(超文本传输协议)的 ...

  5. 内部类中class声明地方不同，效果不一样

    1.一个声明在类中,一个声明在类的方法中.在类中的方法中声明内部类,其方法中的内部类调用 内部类外中的变量,变量必须final class Outter{ int x1 = 0; public voi ...

  6. JS中 window的用法

    1.window.location.reload();作用是刷新当前页面

  7. Android异步更新UI的四种方式

    Android异步更新UI的四种方式 2015-09-06 09:23 segmentfault 字号:T | T 大家都知道由于性能要求,android要求只能在UI线程中更新UI,要想在其他线程中 ...

  8. sql连接又一篇

    作者:初行 – 博客园 SQL连接可以分为内连接.外连接.交叉连接. 数据库数据: book表:                                         stu表:       ...

  9. (转)xcode5.0.2下国际化图文解说

    原文:http://blog.csdn.net/dragoncheng/article/details/6703311 xcode5.0.2下国际化图文解说         分类:           ...

  10. android unique identifier

    android get device mac address programmatically http://android-developers.blogspot.jp/2011/03/identi ...